17

私はgithub の「simplest-redux-example」をいじっていて、 state.count を減らす 2 つ目のレデューサーを追加しました。switch case ステートメントにインクリメントとデクリメントのレデューサーがある場合、問題なく動作します。私が実行したかった演習は、レデューサーをできるだけ多くのモジュラー ピースに分割することでした。このコードは、カウントが未定義であることを示すエラーをスローします。

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

// React component
class Counter extends React.Component {
  render(){
    const { value, onIncreaseClick, onDecreaseClick } = this.props;
    return (
      <div>
        <span>{value}</span>
        <button onClick={onIncreaseClick}>Increase</button>
        <button onClick={onDecreaseClick}>Decrease</button>
      </div>
    );
  }
}

// Action:
const increaseAction = {type: 'increase'};
const decreaseAction = {type: 'decrease'};

// Reducer:
function counter(state, action) {
  let count = state.count;
  switch(action.type){
    case 'increase':
      return {count: count+1};
    default:
      return state;
  }
}
function decrementer(state, action) {
  let count = state.count;
  switch(action.type){
    case 'decrease':
      return {count: count -1};
    default:
      return state;
  }
}
const rootReducer = combineReducers({
  counter,
  decrementer
})

// Store:
let store = createStore(rootReducer, {count: 0});

// Map Redux state to component props
function mapStateToProps(state)  {
  console.log("mapStatetoProps heyyyy");
  return {
    value: state.count
  };
}

// Map Redux actions to component props
function mapDispatchToProps(dispatch) {
  console.log("mapDispatchtoProps heyyyy");
  return {
    onIncreaseClick: () => dispatch(increaseAction),
    onDecreaseClick: () => dispatch(decreaseAction)
  };
}

// Connected Component:
let App = connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter);

React.render(
  <Provider store={store}>
    {() => <App />}
  </Provider>,
  document.getElementById('root')
);
4

2 に答える 2

22

状態オブジェクトのさまざまな部分combineReducersを取得するために渡されたレデューサー。

結果のレデューサーはすべての子レデューサーを呼び出し、それらの結果を 1 つの状態オブジェクトに収集します。状態オブジェクトの形状は、渡された のキーと一致しますreducers。

(私のものを強調)

したがって、内部状態オブジェクトは次のようになります

{
  counter: result of passing `state.counter` into counter reducer
  decrementer: result of passing `state.decrementer` into decrementer reducer
}

これは、フラックス アプリケーションに個別のストアを配置することに似ています。この場合、各ストアは両方とも、グローバル アプリの状態の独自の「部分」を操作します。

実際には、これら 2 つのレデューサーが状態オブジェクトの同じ部分で動作するようにしたいので、実際にはreduce-reducersのようなものが必要になりますが、自分で実装するのは非常に簡単です。状態を各レデューサーに順番に渡し、初期状態を減らします。各レデューサーからの新しい状態で。

実際、これはとても単純で、実装はほんの数行です。

export default function reduceReducers(...reducers) {
  return (previous, current) =>
    reducers.reduce(
      (p, r) => r(p, current),
      previous
    );
}

そしてあなたrootReducerは

const rootReducer = reduceReducers(counter, decrementer);
于 2015-09-20T04:44:33.653 に答える