無法從 redux 接收反應組件中的狀態

Question

我正在嘗試將 redux 狀態顯示到我的 react 組件中，但它未定義。 我無法理解我在哪里做錯了。 我通過閱讀 redux 文檔嘗試自己編碼來學習 redux。

主要反應組件

import React, { Component } from 'react';
import Counter from './components/Counter';
import {Provider} from 'react-redux';
import store from './redux/store';

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <div>
          <h1>COUNTER APPlICATION</h1>
          <Counter />
        </div>
      </Provider>
    )
  }
}

export default App;

反應組件

import React, { Component } from 'react';
import {connect} from 'react-redux';
import {addNumber} from '../redux/actions/addAction';
import {substractNumber} from '../redux/actions/substractAction';

export class Counter extends Component {
  render() {
    return (
      <div>
        <h1>Value:{this.props.value}</h1>
        <h1>Add Only Value:{this.props.addOnly}</h1>
        <button onClick = {() => this.props.addNumber}>+</button>
        <button onClick = {() => this.props.substractNumber}>-</button>
      </div>
    )
  }
}

const mapStateToProps = state => ({
  value: state.value
});

export default connect(mapStateToProps, {addNumber, substractNumber})(Counter);

添加減速器

import {ADDITION} from '../actions/actionTypes';

const initialState = {
  value: 50
}

export default function (state = initialState, action) {
  switch(action.type){
    case ADDITION:
      return{
        value: state.value + 2
      }
    default:
      return state
  }
}

減法器

import {SUBSTRACTION} from '../actions/actionTypes';

const initialState = {
  value: 50
}

export default function (state = initialState, action) {
  switch (action.type) {
    case SUBSTRACTION:
      return {
        value: state.value - 2
      }
      default:
        return state
  }
}

rootReducer

import {combineReducers} from 'redux';
import addReducer from './addReducer';
import substractReducer from './substractReducer';

export default combineReducers({
  add: addReducer,
  substract: substractReducer
})

店鋪

import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers/rootReducer';
import thunk from 'redux-thunk';

export default createStore(rootReducer, applyMiddleware(thunk));

動作類型

export const ADDITION = 'ADDITION';
export const SUBSTRACTION = 'SUBSTRACTION';

添加動作

import {ADDITION} from './actionTypes';
export const addNumber = () => (dispatch) => {
  return dispatch({
    type: ADDITION,
    payload: 2
  })
}

減法

import {SUBSTRACTION} from './actionTypes';

export const substractNumber = () => (dispatch) => {
  return dispatch({
    type: SUBSTRACTION,
    payload: 2
  })
}

Answer 1

你做錯了。

1. 你的狀態只是計數器值，所以不要分成兩個減速器。 您只需要兩個 case 語句，一個用於ADD ，一個用於SUBTRACT 。

2. 不要使用combineReducer和它你想要的，使用像counter一樣的一鍵作為 counter reducer

3. 在 mapStateToProp 中，獲取類似state.counter.value值，其中counter是您在combineReducer({ counter: counterReducer })使用的鍵的名稱

4. 您的按鈕操作/onclick 是錯誤的

 import {ADDITION, SUBTRACTION} from '../actions/actionTypes'; const initialState = { value: 50 } export default function (state = initialState, action) { switch(action.type){ case ADDITION: return value: state.value + 2 } case SUBTRACTION: return{ value: state.value + 2 } default: return state } } ///// no need to regester 2 reducer, just add one above like this export default combineReducers({ counter: counterReducer }); /// In Counter component , mapStateToProp const mapStateToProps = state => ({ value: state.counter.value }); // Just pass redux actions to onClick in button like this <button onClick = {this.props.addNumber}>+</button> <button onClick = {this.props.substractNumber}>-</button>

Answer 2

當你像這樣組合combineReducers ：

export default combineReducers({
  add: addReducer,
  substract: substractReducer
})

您的狀態樹將如下所示：

{
    add: {
        value: 0
    },
    subtract: {
        value: 0
    }
}

所以你應該只有一個減速器才能減少相同的值。