React-native + Redux(Combine Reducers)：创建状态结构答案

【问题标题】：React-native + Redux(Combine Reducers): Create state structureReact-native + Redux(Combine Reducers)：创建状态结构
【发布时间】：2019-03-09 17:37:21
【问题描述】：

我正在开发一个 react-native 应用程序，并且是 redux 的新手。我有 3 个屏幕，几乎所有屏幕的所有状态都相互依赖。例如，第一个屏幕扫描产品，第二个屏幕获取客户详细信息，第三个屏幕显示产品和客户的摘要。自 2 天以来，我一直在碰壁以创建状态结构，最终得到 combineReducers。但是在 combine reducer 中，每个 reducer 都维护自己的状态切片，并且不允许我访问或更新另一个 reducer 的状态。所以， Q1。我应该继续使用combieReducers 还是应该只维护单个reducer？ Q2。如果 combineReducers 没问题，应该如何访问或更新所有 reducer 的相同状态？

【问题讨论】：

标签： reactjs react-native redux react-redux

【解决方案1】：

对于您的第一个问题，是的，您必须合并，因为 combineReducers 将在单个对象中提供所有 reducers 数据

示例：

const rootReducer = combineReducers({
  posts: PostsReducer,
  form: formReducer
});

内部组件

function mapStateToProps(state) {
  return { posts: state.posts };
}

export default connect(mapStateToProps, { createPost })(PostsIndex);

在上面的代码中通过 Redux connect 你可以访问由组合 reducera 产生的状态，比如 this.props.posts 在你的组件中

要更新，您需要触发一个通过所有 reducer 的操作，并根据类型更新状态

示例：

export function createPost(values, callback) {
  const request = axios
    .post(`${ROOT_URL}/posts${API_KEY}`, values)
    .then(() => callback());

  return {
    type: CREATE_POST,
    payload: request
  };
}

【讨论】：

是的..我做到了。但是我卡住的地方是我如何访问或更新减速器之间的状态？或者我如何在两个减速器中保持相同的状态，在我的例子中 products array 将用于产品扫描的第一个屏幕和显示这些产品的第三个屏幕。
从“lodash”导入_；从“../actions”导入 { FETCH_POSTS、FETCH_POST、DELETE_POST }；导出默认函数（状态，动作）{ 开关（action.type）{ case DELETE_POST：return _.omit（state，action.payload）； case FETCH_POST: return { ...state, [action.payload.data.id]: action.payload.data }; case FETCH_POSTS: return _.mapKeys(action.payload.data, "id");默认：返回状态； } } 这是我的减速器，这里的状态将具有所有范围
import * as Actions from '../Actions' import {initialState} from './State' const ProductReducer = (state = initialState, action) => { switch (action.type) { case Actions.SET_CUSTOMER: console.log('this called'); return { ...state, bill: { ...state.bill, customer: action.customer } } default: return state } } export default ProductReducer;
参考以下链接
stackoverflow.com/questions/42239302/…

【解决方案2】：

使用中间件可以实现功能

export default ({ dispatch, getState }) => next => action => {
  next(action);
 const newAction = { ...action, payload: "",state:getState () };
    dispatch(newAction);
};

【讨论】：