redux、react-redux、类组件使用指南

执行流程

应用场景

在以下情况下使用 Redux：

• 应用中有很多 state 在多个组件中需要使用
• 应用 state 会随着时间的推移而频繁更新
• 更新 state 的逻辑很复杂
• 中型和大型代码量的应用，很多人协同开发

redux

state

state.js

const state = {
      waterData: [],
}
export default state;

action

waterSupplyPlanAction.js

const waterSupplyPlanAction = {
      getWaterData(payLoad) {
            return {
                  type: GET_WATER_DATA,
                  payLoad
            }
      },
      updateWaterData(payLoad) {
            return {
                  type: UPDATE_WATER_DATA,
                  payLoad
            }
      }
}

export default waterSupplyPlanAction

waterSupplyPlanActionType.js

export const GET_WATER_DATA = 'get_water_data'
export const UPDATE_WATER_DATA = 'update_water_data'

reducer

reducer 是一个函数，接收当前的 state 和一个 action 对象，必要时决定如何更新状态，并返回新状态。函数签名是：(state, action) => newState。 你可以将 reducer 视为一个事件监听器，它根据接收到的 action（事件）类型处理事件。

reducer执行之后返回的数据就是响应得到的数据

修改state的规则： 不允许在 reducer 中更改 state 的原始对象，需要拷贝副本，再更改副本的值

return {
  ...state,
  value: 123
}

waterSupplyPlanReducer.js

export const waterSupplyPlanReducer = (state = _state, action) => {
      switch (action.type) {
            case GET_WATER_DATA:
                  return Object.assign({}, state, action);
            case UPDATE_WATER_DATA: {
                  return { ...state, waterData: action.payLoad };
            }
            default:
                  return state;
      }

}

reducer 模块化后，通过 combineReducers 进行合并，可以进行重命名

reducer/index.js

const reducer = combineReducers(
	{
		userInfo: userReducer,
		water: waterSupplyPlanReducer,
	}
)
export default reducer;

store

使用 createStore 实例化 store ，将 reducer 传入

store/index.js

// 用reducer实例化store
const store = createStore(reducer);
export default store;

store挂载到组件上（react-redux）

使用 Procider(react-redux中的组件) 组件挂载到 <App/>

index.js

ReactDOM.render(
	<Provider store={store}>
		<App />
	</Provider>,
	document.getElementById('root')
);

组件使用（react-redux）

使用 connect(arg1,arg2)(arg3) 将组建与 store 联系

• arg1 是一个函数，关联 state 数据，返回的数据可以通过 this.props 读取
• arg2 是一个函数，关联 dispatch，返回的数据可以通过 this.props 读取
• arg3 是关联的组件

WaterDataTable.js

//省略一些...
class WaterDataTable extends React.Component {
      handleClick = () => {
            const newData = dataSort(this.props.data)
            this.props.updateWaterData(newData);
      }

      componentDidMount() {
            this.props.getWaterData();
      }

      render() {
            return (
                  <>
                        <button onClick={this.handleClick}>点击根据储水量排序</button>
                        <Table columns={columns} dataSource={this.props.data} />
                  </>
            )
      }
};
export default connect(
      (state) => {
            console.log('WaterDataTable', state.waterSupplyPlanReducer);
            return {
                  data: state.waterSupplyPlanReducer.waterData,
            }
      }, (dispatch) => {
            return {
                  getWaterData: () => {
                        dispatch(waterSupplyPlanAction.getWaterData());
                  },
                  updateWaterData: (payLoad) => {
                        dispatch(waterSupplyPlanAction.updateWaterData(payLoad));
                  }
            }
      }
)(WaterDataTable)

redux 模块化

目录结构