Как поместить значение по умолчанию в компоненте React с избыточностью?

Question

Я спрашиваю себя, есть ли способ инициализировать React Component с помощью реквизитов, и автоматически информировать Redux об этом, чтобы обновить состояние своего приложения?

Я сделал пример Counter:

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

И еще один вопрос, который приходит мне в голову, - это как управлять двумя счетчиками с различными счетчиками, в то же время позволяя избыточности обрабатывать все состояние?1018 * Вполне возможно, что я хочу сделать что-то неправильно, поэтому я был бы признателен, даже если бы вы только что попрактиковались.

Answer 1

Я спрашиваю себя, есть ли способ инициализировать React Component с помощью props и автоматически уведомлять Redux об этом, чтобы обновить состояние приложения?

Мое решение для этой спецификации -используя componentDidMount() крюк жизненного цикла.У нас может быть что-то вроде этого:

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

Нам нужно будет обработать это действие в редукторе, реализация очень похожа на то, что вы сделали.

И еще один вопрос, который приходит мне в голову, - это как управлять 2 счетчиками с различными счетчиками, в то же время позволяя 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, чтобы указать счетчик, который необходимо обновить.