无法从 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
    }
}

所以你应该只有一个减速器才能减少相同的值。