combineReducersを理解する

Question

新しく反応して還元するために新しくなったので、とても簡単なコードを使って遊んで、それがどのように機能するか見てみましょう。 reduxストアにcombineReducersメソッドを渡そうとすると、エラーが発生します。もし私がcombinedReducersを削除し、店に直接還元剤を渡すと、すべて正常に動作します。私はcombineReducersを使用する場合

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.

は、エラーが発生するのはなぜですかもし私がもっと減速機を追加したいのであれば、それではリデューサーが何のためにあるのでしょうか？

main.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

が減速を結合は、減速のハッシュをとり、減速を返します。結果として得られるレデューサーは、ハッシュと同じ形状のオブジェクトを表します。

ので、このような呼び出し：

combineReducers({ name: nameReducer}) 

は次のようなものに見えるかもしれない状態オブジェクトを生成します：あなたの例では

{ name: 'Joe Shmo' } 

を、あなたはそのルックスグローバル状態木を生産しています

{ reducer: 0 } 

しかし、あなたはnumber OUというプロパティを引っ張るしようとしている。このようなこれはあなたのmapStateToPropsのtです。

あなたはこのように見えるためにあなたの減速宣言を変更した場合

：

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}); 

あなたのコードでは、作業を開始する必要があります。

Answer 2

https://redux.js.org/docs/basics/Reducers.html

import { combineReducers } from 'redux' 

const todoApp = combineReducers({ 
    visibilityFilter, 
    todos 
}) 

export default todoApp 

これはと等価であることに注意してください：

export default function todoApp(state = {}, action) { 
    return { 
    visibilityFilter: visibilityFilter(state.visibilityFilter, action), 
    todos: todos(state.todos, action) 
    } 
} 

また、それらに異なる鍵を与える、または異なった機能を呼び出すことができます。

const reducer = combineReducers({ 
    a: doSomethingWithA, 
    b: processB, 
    c: c 
}) 
function reducer(state = {}, action) { 
    return { 
    a: doSomethingWithA(state.a, action), 
    b: processB(state.b, action), 
    c: c(state.c, action) 
    } 
} 

そして、あなたの説明のために各部品

@connect(state => ({ 
    reducerName: state[partStoreName] 
}))