【问题标题】:How to use reduce-reducers with combineReducers如何将 reduce-reducers 与 combineReducers 一起使用
【发布时间】:2019-03-28 18:48:53
【问题描述】:

所以,我试图在另一个减速器中使用来自一个减速器的一些状态,我寻找了一个解决方案,似乎 reduce-reducers 包确实做到了这一点,但这是我的问题......

我有以下 rootReducer.js 文件,我在其中导入所有减速器并将它们与 combineReducers 像这样组合...

import { combineReducers } from "redux";
import globalReducer from "./globalReducer";
import booksReducer from "../features/books/booksReducer";
import categriesReducer from "../features/categories/categoriesReducer";
import authorsReducer from "../features/authors/authorsReducer";

const rootReducer = combineReducers({
    global: globalReducer,
    books: booksReducer,
    categories: categriesReducer,
    authors: authorsReducer
});

export default rootReducer;

现在我想在 books reducer 中使用来自 authors reducer 的一些状态,如何使用 reduce-reducers 包来实现?

【问题讨论】:

标签: javascript reactjs redux reduce reducers


【解决方案1】:

reduce-reducers 就像减速器的“合并”:

const reducer = (state = 0, action) => {
    switch (action.type) {
        case 'ADD':
            return state + action.value;
        case 'MULTIPLE':
            return state * action.value;
        default:
            return state;
    }
};

同样可以写成reduce-reducers:

const addReducer = (state = 0, action) => {
    switch (action.type) {
        case 'ADD':
            return state + action.value;
        default:
            return state;
    }
};
const multipleReducer = (state = 0, action) => {
    switch (action.type) {
        case 'MULTIPLE':
            return state * action.value;
        default:
            return state;
    }
};

const reducer = reduceReducers(addReducer, multipleReducer, 0);

因此,在您的任务中,这意味着您应该重写您的authorsReducerbooksReducer,以便将整个状态作为第一个参数,而不仅仅是它自己的authors 部分:

const before = (state = [], action) => {
    switch (action.type) {
        case `NEW_BOOK`:
            return state.concat([action.book]);
        default:
            return state;
    }
}

const now = (state = {}, action) => {
    switch (action.type) {
        case `NEW_BOOK`:
            return {
                ...state,
                books: state.books.concat([action.book]),
            };
        default:
            return state;
    }
}

但是!我认为这不是你真正想要的。

还有另一个包可以满足您的需求combine-section-reducers

它允许您从任何其他 reducer 访问根状态:

const before = (state = [], action) => {
    switch (action.type) {
        case `NEW_BOOK`:
            return state.concat([action.book]);
        default:
            return state;
    }
}

const now = (state = [], action, rootState) => {
    switch (action.type) {
        case `NEW_BOOK`:
            return state.concat([{
                ...action.book,
                author: rootState.authors[action.book.authorId],
            }]);
        default:
            return state;
    }
}

【讨论】:

  • 我实在无法理解,能否请您添加到我发布的代码中,以显示使用 combine-section-reducers 后的效果?
猜你喜欢
  • 2016-12-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-08-19
  • 1970-01-01
  • 2018-12-15
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多