不可能组合减速器

Question

铅是什么？

当我执行 pull origin main 时，除了我的分支之外，我还使用减速器恢复了另一个分支。所以，我和减速机发生了冲突。我在reducers文件夹中创建了一个index.js以便将它们结合起来。在 store redux 中，我调用了 index.js 减速器，但状态不会在 redux devtools 中读取。

代码

存储

import { createStore, applyMiddleware, compose } from 'redux';

import reducer from 'src/reducers/genres';
import regionsMiddleware from '../middlewares/regionsMiddleware';
import genresMiddleware from '../middlewares/genresMiddleware';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const enhancers = composeEnhancers(
  applyMiddleware(
    genresMiddleware,
    regionsMiddleware,
  ),
);
const store = createStore(
  // reducer
  reducer,
  // enhancer
  enhancers,
);

export default store;

REDUCER(jindex)

import { combineReducers } from 'redux';

import genresReducer from './genres';
import regionsReducer from './regions';

const rootReducer = combineReducers({
  genres: genresReducer,
  regions: regionsReducer,
});

export default rootReducer;

GENRES(reducer)

import { SAVE_GENRES } from '../actions/genres';

const initialState = {
  genres: [],
};

const reducer = (state = initialState, action = {}) => {
  console.log(`le reducer a reçu une action ${action.type}`);
  switch (action.type) {
    case SAVE_GENRES:
      /*
      - on crée un nouvel objet : {}
      - on déverse dedans toutes les informations du state actuel : ...state
      - on écrase une valeur qui provenait du state actuel
      */
      return {
        ...state, // list: state.list
        genres: action.genres,
      };

    default:
      return state;
  }
};

export default reducer;

REGIONS(reducer)

// import actions
import { SAVE_REGIONS } from '../actions/regions';

const initialState = {
  regions: [],
};
const reducer = (state = initialState, action = {}) => {
  switch (action.type) {
    case SAVE_REGIONS:
      /*
      - on crée un nouvel objet : {}
      - on déverse dedans toutes les informations du state actuel : ...state
      - on écrase une valeur qui provenait du state actuel
      */
      return {
        ...state, // regions: state.regions
        regions: action.regions,
      };

    default:
      return state;
  }
};

export default reducer;

SRC INDEX.JS

// == Import : npm
import ReactDom from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';

// == Import : local
// Components
import App from 'src/components/App';
import store from 'src/store';
// bootstrap's Css
import 'bootstrap/dist/css/bootstrap.min.css';

// == Render
// 1. Root React element (the one that contains the entire app)
// => Creates Nested Object Structure (Virtual DOM)
const rootReactElement = (
  <Provider store={store}>
    <BrowserRouter>
      <App />;
    </BrowserRouter>
  </Provider>
);
// 2. The target of the DOM (where the structure is to come to life in the DOM)
const target = document.getElementById('root');
// 3. Trigger React (virtual) rendering =dom > (web page)
ReactDom.render(rootReactElement, target);

屏幕截图

Answer 1

在您的商店中，您应该导入正确的减速机。

您现在这样做，

import reducer from 'src/reducers/genres';

但可能应该是（因为您想使用组合的 rootReducer）

import reducer from 'src/reducers/'; 

---

此外，由于您使用 combineReducers 实用程序，它只会将相关状态传递给您的特定减速器，因此您不应返回它们的完整路径。

const initialState = {
  regions: [],
};
// and later on
case SAVE_REGIONS:
  return {
    ...state, // regions: state.regions
    regions: action.regions,
  };

应该成为

const initialState = [];
// and later on
case SAVE_REGIONS:
  return action.regions;

并且

const initialState = {
  genres: [],
};
// and later on
case SAVE_GENRES:
  return {
    ...state, // list: state.list
    genres: action.genres,
  };

应该成为

const initialState = [];
// and later on
case SAVE_GENRES:
  return action.genres;