reactjs - 了解combineReducers

Question

React 和 Redux 的新手，所以尝试一些非常简单的代码来看看它是如何工作的。当我尝试将combineReducers 方法传递到redux 存储时，我收到错误。如果我删除组合 reducer 并将 reducer 直接传递到商店，一切正常。

let store = createStore(rootReducer);

错误

Uncaught Error: Objects are not valid as a React child (found: object with keys {reducer}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of App.

为什么当我使用combineReducers时会出现错误？如果我想添加更多的 reducer ，我想这就是 mixReducers 的用途，该怎么办？

ma​​in.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, combineReducers } from 'redux';

import App from './components/app';

let reducer = (state=0, action) => {
  switch (action.type) {
    case 'INCREASE': 
            return state+1
    case 'DECREASE': 
            return state-1
    default: return state
  }
}

const rootReducer = combineReducers({
    reducer:reducer
});

let store = createStore(rootReducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>
  , document.querySelector('.container'));

//app.js

import React, { Component } from 'react';
import {connect} from 'react-redux';

class App extends Component {
  render() {
        let {number, increase, decrease} = this.props
        return(
                <div>
              <div>{number}</div>
              <button onClick={e=>increase()}>+</button>
              <button onClick={e=>decrease()}> - </button>
            </div>
            );
     }
}

let mapStateToProps = state => ({
  number: state
})

let mapDispatchToProps = dispatch => ({
  increase: () => dispatch({type: 'INCREASE'}),
  decrease: () => dispatch({type: 'DECREASE'})
});

export default connect(mapStateToProps, mapDispatchToProps)(App);

Answer 1

组合 reducer 采用 reducer 的哈希值并返回 reducer 。生成的 reducer 表示与哈希形状相同的对象。

所以，像这样的调用:

combineReducers({ name: nameReducer})

将生成一个可能如下所示的状态对象:

{ name: 'Joe Shmo' }

在您的示例中，您正在生成一个如下所示的全局状态树:

{ reducer: 0 }

但是您正尝试在 mapStateToProps 中从中提取一个名为 number 的属性。

如果您将 reducer 声明更改为如下所示:

const number = (state=0, action) => {
  switch (action.type) {
    case 'INCREASE': 
            return state+1
    case 'DECREASE': 
            return state-1
    default: return state
  }
}
const rootReducer = combineReducers({
    number
});

然后将您的 mapStateToProps 更改为如下所示:

const mapStateToProps = ({number}) => ({number});

您的代码应该开始工作。