Состояние редуктора Redux возвращает значение NaN при монтировании компонента, но работает нормально при обновлении

Question

Я хотел создать простой счетчик по редуксу (я не использую способ отправки)

Это мой Action код:

export const increaseNumber = () => {
    return {type: 'INCREASE'}
}
export const decreaseNumber = () => {
    return {type: 'DEACREASE'}
}
export const clearNumber = () => {
    return {type: 'CLEARNUMBER'}
}

Это мой Reducer file:

initialState = {
    number: 3
}

export default (state = initialState, action) => {
    switch (action.type) {
        case 'INCREASE':
            return { number: state.number + 2 }
            break;
        case 'DEACREASE':
            return { number: state.number - 5 }
            break;
        case 'CLEARNUMBER':
            return { number: 0 }
            break;
        default:
            return state;
    }
}

И это мой mapStateToProps код:

const mapStateToProps = (state) => {
  return {number: state.counterR.number}
}

Затем я помещаю состояние, как это, в компонент:

<Text>{props.number}</Text>

Это rootReducer, который я назвал index.js в папке редукторов:

import {combineReducers} from 'redux';
import counterReducer from './counterRecducer';
import inputReducer from './inputRecucer';
import reducer from './reducer';


export default combineReducers({
   counterR: counterReducer,
   inputR: inputReducer,
   dialogR: reducer
})

Это App.js файл:

import {CounterComponent} from './src/components';
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import reducers from './src/reducers';

const App = () => {
  return (
    <Provider store={createStore(reducers)}>
      <View style={styles.container}>
        < CounterComponent />
      </View>
    </Provider>
  )}

Когда я рендерил компонент в первый раз, он возвращает NaN, но при нажатии на кнопку очистки отображается 0, а затем кнопка увеличения и уменьшения будет работать

Как это исправить?

Answer 1

При первом рендеринге компонента он возвращает NaN, но при нажатии на кнопку очистки отображается 0

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

Решение : когда вы создаете хранилище, вы должны передать initialState var в качестве второго параметра, например:

createStore(reducers, initialState)

Так что ваш App компонент будет выглядеть так:

const App = () => {
  return (
    <Provider store={createStore(reducers, initialState)}>
      <View style={styles.container}>
        < CounterComponent />
      </View>
    </Provider>
  )}

Надеюсь, это поможет.