React Native中如何从另一个Reducer更新目标Reducer的状态？

嘿，我来帮你解决在React Native里从一个Reducer更新另一个Reducer状态的问题～

下面是两种实用的解决方案，结合你的代码来具体说明：

方案1：让多个Reducer监听同一个Action类型 #

Redux的机制允许单个Action被所有Reducer捕获，所以你可以直接让目标Reducer也监听SM_ACTION_LIKE这个Action类型，根据Action传递的数据更新自身状态。

举个例子，假设你有一个需要同步更新的likedPostsReducer：

// 目标Reducer的初始状态
const initialLikedState = { likedPosts: [] };

const likedPostsReducer = (state = initialLikedState, action) => {
  switch(action.type) {
    case SM_ACTION_LIKE:
      // 根据action里的post数据更新当前Reducer的状态
      return {
        ...state,
        likedPosts: [...state.likedPosts, action.post]
      };
    default:
      return state;
  }
};

当你dispatchdoLike这个Action时，smReducer和likedPostsReducer都会接收到该Action，并各自完成状态更新。

方案2：使用Redux Thunk触发多个独立Action #

如果两个Reducer的更新逻辑相对独立，或者你想在同一个Action Creator里明确区分不同的状态更新操作，可以借助redux-thunk中间件（需要先在Store配置中启用它），让Action Creator返回一个函数，在函数内dispatch多个Action。

步骤1：定义新的Action类型和Creator #

// 定义用于更新第二个Reducer的Action类型
export const UPDATE_LIKED_POSTS = 'UPDATE_LIKED_POSTS';

// 对应的Action Creator
export const updateLikedPosts = (post) => ({
  type: UPDATE_LIKED_POSTS,
  post
});

// 修改原doLike为支持多Action的异步Creator
export const doLike = payload => {
  return (dispatch) => {
    let updatedPost = { Id: 1, userId: 1, postId: payload.post._id, __v: 1, count: payload.type === 1 ? 10 : 1 };
    
    // 先触发更新smReducer的Action
    dispatch({ type: SM_ACTION_LIKE, post: updatedPost });
    
    // 再触发更新目标Reducer的Action
    dispatch(updateLikedPosts(updatedPost));
  };
};

步骤2：让目标Reducer监听新的Action类型 #

const initialLikedState = { likedPosts: [] };

const likedPostsReducer = (state = initialLikedState, action) => {
  switch(action.type) {
    case UPDATE_LIKED_POSTS:
      return {
        ...state,
        likedPosts: [...state.likedPosts, action.post]
      };
    default:
      return state;
  }
};

步骤3：配置Store启用Thunk中间件 #

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers'; // 合并所有子Reducer的根Reducer

const store = createStore(rootReducer, applyMiddleware(thunk));

关键注意事项 #

• 确保你已经用combineReducers合并了所有子Reducer，比如：

import { combineReducers } from 'redux';
import smReducer from './smReducer';
import likedPostsReducer from './likedPostsReducer';

const rootReducer = combineReducers({
  sm: smReducer,
  likedPosts: likedPostsReducer
});

export default rootReducer;

• 所有Reducer必须是纯函数，禁止在Reducer内修改原状态对象或执行异步操作，必须返回新的状态副本。

内容的提问来源于stack exchange，提问作者Shashika Virajh