在两个 Redux Reducer/States 之间共享数据答案

【问题标题】：Sharing data between two Redux Reducers/States在两个 Redux Reducer/States 之间共享数据
【发布时间】：2016-04-15 04:05:19
【问题描述】：

这是两个状态/reducer 之间数据共享的合理解决方案吗？

//combineReducers
function coreReducer(state = {}, action){

    let filtersState = filters(state.filters, action);
    let eventsState = events(state.events, action, { filters: filtersState});

    return { events: eventsState, filters : filtersState};

}

export const rootReducer = combineReducers(
    {
        core  : coreReducer,
        users
    }
);

如果是这样，如果两者都响应同一个调度的事件并且第二个归约函数取决于第一个的新状态，如何保证归约函数的执行顺序？

假设我们调度了一个 SET_FILTER 事件，该事件附加到过滤器存储中的 activeFilters 集合，然后根据 activeFilters 值更改事件存储中项目的可见性。

//ActiveFilters reducer
function filtersActions(state = {}, action){

    switch (action.type) {
        case SET_FILTER:
            return Object.assign({}, state, {
                [action.filterType]: action.filter
            })
        case REMOVE_FILTER:
            var temp = Object.assign({}, state);
            delete temp[action.filterType];
            return temp;

        case REMOVE_ALL_FILTERS:
            return {};

        default:
            return state
    }
}

我想我找到了答案 - 计算派生数据 - 重新选择

http://redux.js.org/docs/recipes/ComputingDerivedData.html

【问题讨论】：

这似乎不太理想。减速器应该是状态和动作的函数，仅此而已。将第三个参数传递给 events reducer 是不习惯的。这将有助于了解更多这里发生的事情。 filters 和 events 减速器是什么样的？
您好！您是否使用重新选择在减速器之间共享状态？你是怎么做到的？
好吧，找到了一个使用“mapStateToProps”发布的不同解决方案

标签： javascript redux

【解决方案1】：

/--------container--------/
import {getGroupsAndMembers} from '../reducers'
const mapStateToProps = (state) => {
  return {
    inputValue: state.router.location.pathname.substring(1),
    initialState: getGroupsAndMembers(state) <-- this one
 }
}


/--------reducers--------/
export function getGroupsAndMembers(state){
   let { groups, members } = JSON.parse(state)
   response = {groups, members}
   return response;
}


GroupsContainer.propTypes = {
 //React Redux injection
 pushState: PropTypes.func.isRequired,
 // Injected by React Router
 children: PropTypes.node,
 initialState:PropTypes.object,
}

不要忘记遵循“连接”指南

export default connect(mapStateToProps,{ pushState })(GroupsContainer)

【讨论】：

【解决方案2】：

如果你有两个 reducer，一个依赖于第一个的值，你只需要仔细更新它们，最好的解决方案就是使用一个特殊的函数，它首先设置过滤，然后查询对应的事件。另外，请记住，如果事件获取是异步操作，您还应该根据过滤类型进行嵌套 - 否则可能会出现竞争条件，并且您将获得错误的事件。

I have created a library redux-tiles 处理原始 redux 的冗长，所以我将在这个例子中使用它：

import { createSyncTile, createTile } from 'redux-tiles';

const filtering = createSyncTile({
  type: ['ui', 'filtering'],
  fn: ({ params }) => params.type,
});

const events = createTile({
  type: ['api', 'events'],
  fn: ({ api, params }) => api.get('/events', { type: params.type }),
  nesting: ({ type }) => [type],
});

// this function will just fetch events, but we will connect to apiEvents
// and filter by type
const fetchEvents = createTile({
  type: ['api', 'fetchEvents'],
  fn: ({ selectors, getState, dispatch, actions }) => {
    const type = selectors.ui.filtering(getState());
    return dispatch(actions.api.events({ type }));
  },
});

【讨论】：