如何在另一个还原器中查看更新的状态

Question

我有2个还原A，B分别位于包装A和B中。我有一家包装中的商店，将两个还原器结合在一起。

软件包a消耗软件包B。但是，软件包B具有form，在提交时必须更新软件包A中定义的组件。我已经在包B中定义了一个操作，并希望Readucer A用于处理该操作。

我能够获得该动作的案例陈述，但是还原A中的状态并不能反映全球状态。我认为，一旦商店的状态更新了所有构成商店的还原状态，但事实并非如此。还原A正在维护自己的状态，该状态是全球商店状态的子集。我如何使Reducer成为Reducer B带来的状态更新？

我的一个想法是在A中合并缩小器B，但这将使B键B取决于A。我没有尝试使用redux-form，因为我们对表单元素有自己的内部组件。还有其他想法/建议吗？

更新：添加一些代码，操作类型是定义为字符串的常数。提交表格后，我希望派遣SUBMIT_COURSE_DATA操作，并在Reducer A中更新状态A。商店本质上是使用combineReducers组合reducer a和b。

// Reducer B
const bReducer = (state = {
selectedCourse: {
     courseType: ""
 },  
}, action) => {
  const newState = Object.assign({}, state);
switch (action.type) {
    case COURSE_DATA_CHANGE:
          newState.selectedCourse.courseType = action.courseType;
  } 
};
export default bReducer;  
// Action B 
 export function handleCourseDataChange(courseType) {
 return {
    type: COURSE_DATA_CHANGE,
    courseType : courseType
 }
}
 export function submitCourseData() {
  return {
    type: SUBMIT_COURSE_DATA,
  }
}
 //Reducer A
    const formReducers = (state = {
    coursesContext: {
    data: [],
    actions: []
  },  
}, action) => {  
const newState = Object.assign({}, state);  
 case SUBMIT_COURSE_DATA:
      newState.coursesContext.data = [newState.coursesContext.data, Object.assign({},
        {"Course_Type": newState.selectedCourse.courseType})];
    return newState;

     // store.js
        import { reducers as modalManagerReducers } from 'modal';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import reduceReducers  from 'reduce-reducers';
import createSagaMiddleware from 'redux-saga';
import { baseReducers } from '../../../packageB/src/components/AddCourseDialog';
import  courseFormReducers from './reducers';
import  formSubmissionReducer from './formReducer';
import { SUBMIT_COURSE_DATA } from '../../../packageB/src/components/actions';
const sagaMiddleware = createSagaMiddleware();
const courseReducer = Object.assign({}, { model: courseFormReducers });
const mainReducer = combineReducers(Object.assign({}, baseReducers, courseReducer, modalManagerReducers ));
const formSubmissionReducer = function(state,action) {
   switch (action.type)
   {
       case SUBMIT_COURSE_DATA:
           return formSubmissionReducer(state.selectedCourse);
       default:
           return state;
   }
};
const rootReducer = reduceReducers(mainReducer, formSubmissionReducer);
const store = createStore(
    rootReducer,
    compose(applyMiddleware(sagaMiddleware)),
);
export  {store, sagaMiddleware};
// formSubmissionReducer is same as reducer A. Just that now reducer A
   doesn't have a case for SUBMIT_COURSE_DATA anymore.
//AddCourseDialog 
// Form Submit handler
 handleSubmit(e) {
    e.preventDefault();
    this.props.dispatch(submitCourseData());
}
    // How to ensure that formSubmissionReducer in the store gets invoked here?
    const baseReducers = Object.assign({}, { baseReducer: courseBaseReducers });
export { baseReducers };
export default connect(mapStateToProps)(AddCourseDialog);

更新包括AddCourseDialog容器，该容器可以通过派遣操作来处理"更改"并提交事件。

Answer 1

根据slice还原器之间的共享状态Redux FAQ条目：

许多用户后来想尝试在两个还原器之间共享数据，但是发现combineReducers不允许他们这样做。可以使用几种方法：

• 如果还原器需要从另一片状态下了解数据，则状态树的形状可能需要重新组织，以便单个还原器正在处理更多的数据。
• 您可能需要编写一些自定义功能来处理其中一些动作。这可能需要用自己的顶级还原功能替换combineReducers。您还可以使用诸如减少还原器之类的实用程序来运行combineReducers来处理大多数操作，但也可以为跨状态切片的特定操作运行更专业的还原器。
• 异步动作创建者（例如Redux-thunk）可以通过getState()访问整个状态。动作创建者可以从状态检索其他数据并将其置于操作中，以便每个还原器都有足够的信息来更新自己的状态切片。

还有许多其他第三方还原实用程序可用，其中一些可能很有用。特别是，您可能想查看ryo33/组合截面降低器，车辆/组合减少和koderslab/topological-cological-cology-combine-reducer。

update

根据您的问题。 r不是降低的"现在您有：

const courseReducer = Object.assign({}, { model: courseFormReducers });
const mainReducer = Object.assign({}, baseReducers, courseReducer,        
                                 modalManagerReducers );

那是不是您需要的。您需要将这些切片减少器传递到combineReducers，以形成"每片"的初始化。减速器。然后，如果您想使用reduceReducers，请通过"顶级状态"。还原器。这是一个示例：

const combinedReducer = combineReducers({
    model : courseFormReducers,
    anotherSlice : anotherSliceReducer
});
const rootReducer = reduceReducers(combinedReducer, formSubmissionReducer);
const store = createStore(rootReducer);