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

Posted 2023-02-22

【中文标题】React-native + Redux(Combine Reducers)：创建状态结构

【英文标题】：React-native + Redux(Combine Reducers): Create state structure

【发布时间】：2019-03-09 17:37:21

【问题描述】：

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

【参考方案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;

参考以下链接

***.com/questions/42239302/…

【参考方案2】：

使用中间件可以实现功能

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