如何在react-redux中返回组合的减速器？

Question

I am trying to use react-redux for manage states and props in a test project.

For example please consider this code : (Index.js)

 import React, { Component } from 'react' import { render } from 'react-dom' import { Provider } from 'react-redux' import { createStore, combineReducers } from 'redux' import Counter from './counter' function counterReducer(state = {count: 0}, action) { switch(action.type) { case 'INCREMENT': return { count: state.count + 1 } break case 'DECREMENT': return { count: state.count - 1 } break default: return state } } function newsReducer(state = {news: 'default news'}, action) { switch(action.type) { case 'ONE': return { news: 'This is News one' } break case 'TWO': return { news: 'This is News two' } break default: return state } } const combine = combineReducers({ counterReducer, newsReducer, }) const store = createStore(combine) render( <Provider store={store}> <Counter /> </Provider>, document.getElementById('root') ) 

And this is my component code : (Counter.js)

 import React, {Component} from 'react' import {connect} from 'react-redux' class Counter extends Component { constructor(props) { super(props) this.increment = this.increment.bind(this) this.decrement = this.decrement.bind(this) } increment() { this.props.dispatch({type: 'INCREMENT'}) } decrement() { this.props.dispatch({type: 'DECREMENT'}) } render() { return( <div> <h1>Counter</h1> <h3>{this.props.news}</h3> <h3>{this.props.count}</h3> <button onClick={this.increment}>+</button> <button onClick={this.decrement}>-</button> </div> ) } } function mapStateToProps(state) { return { count: state.count, news: state.news, } } export default connect(mapStateToProps)(Counter) 

So, if i do not use the combine reducer and I call once reducer this works ! But after combine this not works and this have not any response ... My question: How can I use the combine reducers and states ?

I am so sorry, Because my English is not well and might be I have many mistakes to writing English :-)

Thank you

Answer 1

When you use combineReducer you get the following state shape:

{
   count: ...,
   news: ...
}

Since you reducers return objects, the actual state would be:

{
   count: { count: ... },
   news: { news: ... }
}

The simple solution is to return the values without the wrapping object:

function counterReducer(state = 0, action) {
    switch(action.type) {
        case 'INCREMENT':
            return state.count
            break
        case 'DECREMENT':
            return state.count - 1
            break
        default:
            return state
    }
}

function newsReducer(state = 'default news', action) {
    switch(action.type) {
        case 'ONE':
            return 'This is News one'
            break
        case 'TWO':
            return 'This is News two'
            break
        default:
            return state
    }
}

And now the state would be:

{
   count: 0,
   news: 'default news'
}

Answer 2

The problem is that your reducer cases are not respecting the previous state of the store and is overriding it with entirely new object. Try this edited code for better understanding.

function counterReducer(state = {count: 0}, action) {
    switch(action.type) {
        case 'INCREMENT':
            return { ...state, count: state.count + 1 }
            break;
        case 'DECREMENT':
            return { ...state, count: state.count - 1 }
            break
        default:
            return state
     }
}

function newsReducer(state = {news: 'default news'}, action) {
    switch(action.type) {
        case 'ONE':
            return { ...state, news: 'This is News one' }
            break
        case 'TWO':
            return { ...state, news: 'This is News two' }
            break
        default:
            return state
    }
}

The { ...state, fieldToEdit: 'value' } is a statement which says keep all the values of the state but only change the key I am providing. your store object was like

{
    count: 0,
    news: 'Default news'
}

so on using { ...state, count: 1 } it means

{
    news: 'Default news',
    count: 1
}

where as you simply overrided the entire object. like this

{
    count: 1
}

Note: ...state is an es6 spread operator you can also use

Object.assign({}, state, { count: 1 }) 

for es5

Also, check the names of the keys you used in CombineReducer and use the same keys to access data in your component which in your case is counterReducer so you have to access counter like state.counterReducer.count