如何将 reducer 添加到 React Redux 应用程序

Question

我有以下商店：

setup.js

import catReducer from '../reducers/catReducer';

let store;

const initStore = ({onRehydrationComplete}) => {
  store = createStore(
    combineReducers({
      ...reactDeviseReducers,
      catReducer,
      form: formReducer,
      router: routerReducer,
      apollo: apolloClient.reducer()
    }),
    {},
    compose(
      applyMiddleware(
        thunk,
        routerMiddleware(history),
        apolloClient.middleware()
      ),
      autoRehydrate()
    )
  );

  persistStore(store, {
    blacklist: [
      'form'
    ]
  }, onRehydrationComplete);

  return store;
};

我正在尝试添加减速器 catReducer，如上所示。当 catReducer 不存在时，一切正常，当我添加 catReducer 并稍后在组件中记录 state 时，catReducer 未按预期在商店中显示。我做错了什么？

catReducer.js

import * as types from '../actions/actionTypes';
import initialState from './initialState';

export default function catReducer(state = initialState.cats, action) {
  switch(action.type) {
    case types.LOAD_CATS_SUCCESS:
      return action.cats
    default:
      return state;
  }
}

初始状态

export default {
  cats: [],
  hobbies: []
}

我的反应组件：CatsPage.js

import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import CatList from './CatList';
import {loadCats} from '../../actions/catActions';

class CatsPage extends React.Component {
  componentDidMount() {
    this.props.dispatch(loadCats())
  }
  render() {
    return (
      <div>
        <h1>Cats</h1>
        <div>
          <CatList cats={this.props.cats} />
        </div>
      </div>
    );
  }
}

CatsPage.propTypes = {
  cats: PropTypes.array.isRequired
};

function mapStateToProps(state, ownProps) {

  console.log('mapStateToProps')
  console.log(state)

  return {
    cats: state.cats
    //cats: [{id:1, name: "Maru"}]
  };
}

export default connect(mapStateToProps)(CatsPage);

更新

上述 JS 控制台错误：

warning.js:36 Warning: Failed prop type: The prop `cats` is marked as required in `CatsPage`, but its value is `undefined`.

Warning: Failed prop type: The prop `cats` is marked as required in `CatList`, but its value is `undefined`.

CatList.js:8 Uncaught TypeError: Cannot read property 'map' of undefined

Answer 1

在你的函数 mapStateToProps 中你试图将猫分配给 state.cats 但在你的 combineReducers 函数中你的对象看起来像 {catReducer: catReducer}。尝试将 combineReducers 函数中的 catReducer 条目更改为 {cats: catReducer}

之类的内容

Answer 2

改变

 return {
    cats: state.cats
    //cats: [{id:1, name: "Maru"}]
  };

到

  return {
    cats: state.catReducer.cats
    //cats: [{id:1, name: "Maru"}]
  };

也许对你有用

Answer 3

修改您的 combineReducers 呼叫。请参阅两个代码示例的第 3 行。

正确一个

combineReducers({ ...reactDeviseReducers, cats: catReducer, form: formReducer, router: routerReducer, apollo: apolloClient.reducer() })

你的会被翻译成

combineReducers({ ...reactDeviseReducers, catReducer: catReducer, form: formReducer, router: routerReducer, apollo: apolloClient.reducer() })

如何将 reducer 添加到 React Redux 应用程序

How to add a reducer to a React Redux app

reducers

reactjs

redux

redux-thunk

react-redux

更新