Redux 定义

Action Creator 使用了 redux-thunk 中间件的异步写法:

// 支持异步操作的action creator
export const changeState = (newState) => async (dispatch) => {
    await dispatch({
        type: CHANGE_STATE,
        data: newState,  // 注意这里用data作为payload的key
    });
};

Reducer 使用了 Object.assign 来更新状态:

export function headReducer(state = initState, action) {
    switch (action.type) {
        case CHANGE_STATE:
            // 使用Object.assign合并状态
            return Object.assign({}, s内容异常请访问tate, { ...action.data });
        // 支持其他action类型
        case CHANGE_ROUTE_PATH:
            return { ...state, selectedKeys: action.payload };
        default: return state;
    }
}

使用 combineReducers 合并多个 reducer:

const rootReducer = combineReducers({
    headReducer,
    routing: routerReducer  // 集成了路由reducer
});

export default rootReducer;

A组件更新

// Layout组件连接Redux
@connect(
  // mapStateToProps
  ({ headReducer }) => ({
    marketingCampaignStatus: headReducer.marketingCampaignStatus,
    // ...其他状态
  }),
  // mapDispatchToProps 
  {
    changeState,  // 注入action creator
  }
)

class Layout extends React.Component {
  // 定义状态更新方法
  onMarketingStatusChange = (newStatus) => {
    this.props.changeState({
      marketingCampaignStatus: newStatus
    });
  }

  render() {
    // 传递给子组件
    return (
      <Header
        marketingCampaignStatus={this.props.marketingCampaignStatus}
        onMarketingStatusChange={this.onMarketingStatusChange} 
      />
    )
  }
}

// 子组件使用
class Header extends React.Component {
  render() {
    const { marketingCampaignStatus, onMarketingStatusChange } = this.props;
    
    return (
      <div onClick={() => onMarketingStatusChange(!marketingCampaignStatus)}>
        状态: {marketingCampaignStatus ? '开' : '关'}
      </div>
    )
  }
}

B组件响应

export default connect(({ headReducer}) => ({
    marketingCampaignStatus: headReducer.marketingCampaignStatus
}), {
    changeState
})(DistributeOrder);