带有React钩子的Redux数据流

Question

我正在构建一个Web应用程序。

我正在尝试使用react-hooks。

，我快完成了。

但是，我觉得我的 redux-flow 有点像上图那样很奇怪。

我只是想知道我做得不错。

MyStore.js

import {handleActions} from 'redux-actions';
import produce from 'immer';

export const INPUT_DATA = 'INPUT_DATA';

const initialState = {
  id: '',
  name: '',
  email: '',
  address: '',
  gender: '',
};

export default handleActions({
  [INPUT_DATA]: (state, action) => {
    return produce(state, draft=>{
      draft = {...state, ...action.payload};
    });
  },
  ...
},initialState);

FormA.jsx

import React from 'react';
import {useDispatch} from 'react-redux';

const FormA = () => {
  const dispatch = useDispatch();
  const [data, setData] = React.useState({id:'',name:'',email:''});
  React.useEffect(()=>{
    dispatch({type: INPUT_DATA, payload: data });
  },[data]);
  function handleChange(e,name){
    setData({...data, [name]:e.target.value});
  }

  return (
    <>
      <input type="text" value={data.id} onChange={(e)=>handleChange(e,'id')} />
      <input type="text" value={data.name} onChange={(e)=>handleChange(e,'name')} />
      <input type="text" value={data.email} onChange={(e)=>handleChange(e,'email')} />
    </>
  );
}

FormB.jsx

import React from 'react';
import {useDispatch} from 'react-redux';

const FormB = () => {
  const dispatch = useDispatch();
  const [data, setData] = React.useState({address:'',gender:''});
  React.useEffect(()=>{
    dispatch({type: INPUT_DATA, payload: data });
  },[data]);
  function handleChange(e,name){
    setData({...data, [name]:e.target.value});
  }

  return (
    <>
      <input type="text" value={data.address} onChange={(e)=>handleChange(e,'address')} />
      <input type="text" value={data.gender} onChange={(e)=>handleChange(e,'gender')} />
    </>
  );
}

Answer 1

如果您的代码遵循这种redux模式，那么它应该是可靠的。

这是理想的路径：

Component -> action -> middleware -> API -> reducer -> props -> Component

似乎也与此流程保持一致：

https://cdn-images-1.medium.com/max/1600/*1QERgzuzphdQz4e0fNs1CFQ.gif

Answer 2

FC ListView在这里似乎是功能组件，您可以在此处使用钩子通过从react包中导入useState来管理伪状态。

1. 使用connect（）（）;导出FC ListView；
2. 从react导入useState;

3. 使用此挂钩更新状态。

   从'react'导入{useState};

const ListingTable =（props）=> {

let [name, updateName] = useState('John Doe');
return (
    <div>
        <p>{name}</p>
        <button onClick={_ => updateName('Alex')}> Change Name</button>
    </div>
);};

您可以在此处使用useState作为setState来管理功能组件中的状态变量。