如何将默认值放入redux的中？

Question

我问自己，是否有一种方法可以用道具初始化一个React组件，并自动让Redux知道更新它的应用程序状态？

我举了一个反例：

import React from 'react';
import {createStore} from "redux"
import {Provider} from "react-redux"

import Counter from "./Counter"
import countReducer from "./ducks.js"

const store = createStore(countReducer)

class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <div className="App">
          <Counter />
        </div>
      </Provider>
    );
  }
}

export default App;

Counter.js

import React from 'react';
import {connect} from "react-redux"
import {increment, decrement, reset} from "./ducks"

const Counter = ({count, decrement, increment, reset}) => (
    <div>
      <h1>Counter</h1>
      <button onClick={decrement}>-</button>
      <span style={{ margin: "0 10px" }}>{count}</span>
      <button onClick={increment}>+</button>
      <div>
        <button onClick={reset}>Reset</button>
      </div>
    </div>
  );

const mapStateToProps = ({count}) => ({
  count
})

const mapDispatchToProps = {
  decrement,
  increment,
  reset
}

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

ducks.js

// action creators
export const increment = () => ({
  type: "INC"
})

export const decrement = () => ({
  type: "DEC"
})

export const reset = () => ({
  type: "RESET"
})

// reducers
export default function countReducer(state = { count: 0 }, action) {

  switch (action.type) {
    case "INC":
      return { count: state.count + 1 }
    case "DEC":
      return { count: state.count - 1 }
    case "RESET":
      return state.defaultCount ? {
          count: state.defaultCount
        } : {
          count: 0
        }
    default:
      return state
  }
}

它的工作原理是预期的:我们可以对值0增加、减少或重置。

但是，如果我们想要重置另一个值呢？

class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <div className="App">
          <Counter defaultValue={10}/>
        </div>
      </Provider>
    );
  }
}

我脑海中的另一个问题是如何管理两个不同计数器的计数器，同时仍然让redux处理整个状态？

我很可能想以错误的方式做一些事情，所以即使你有最好的实践，我也会感激你的。

Answer 1

我问自己，是否有一种方法可以用道具初始化一个React组件，并自动让Redux知道更新它的应用程序状态？

该规范的解决方案是使用componentDidMount()生命周期挂钩。我们可能会有这样的事情：

componentDidMount(){
   if(this.props.defaultValue){
      this.props.initCounter(this.props.defaultValue);
   }
}
...
const mapDispatchToProps = dispatch({
   ...
   initCounter: defaultValue  => dispatch({type: 'INIT_COUNTER', payload: {defaultValue}})
   ...
})

我们需要在还原器中处理这个操作，实现非常类似于您所做的事情。

我脑海中的另一个问题是如何管理两个不同计数器的计数器，同时仍然让redux处理整个状态？

那么，我们的状态将是counter对象的数组，如下所示：

const reducer = (state = [ { id: 1, value:77 }, { id: 2, value: 88} ], action) => {
      switch (action.type):
           case 'INCREMENT':
               return state.map(c => {
                     if(action.payload.id === c.id) return {...c, value: c.value + 1};
                     return c;
               });
           case 'DECREMENT':
               return state.map(c => {
                     if(action.payload.id === c.id) return {...c, value: c.value - 1};
                     return c;
               })
           ...
           default:
               return state;
};

我们使用id来指定需要更新的计数器。