Question

我正在努力学习Redux。我按照在线教程并使用他们的示例，它工作正常。然后我做了另一个小测试应用程序，它工作正常。现在我正在尝试另一个小型测试应用程序而且我仍然坚持这个错误并且不知道为什么。

该应用程序只是一个输入框和一个按钮，当您单击该按钮时，它会将框中的任何内容添加到下面显示的列表中。

但是，减速器不会更新状态。我已经看过造成这种情况的常见问题，并且似乎无法找到我的错误，我的减速机不会改变状态而且我已经限制了调度等等。也许我只是在某个地方拼错了某些东西（或者那种小而愚蠢的东西），但我却无法让它发挥作用。

因此我尝试更改它，以便它只显示您在下面的框中输入的内容，但它仍然无法正常工作。任何人都知道为什么减速器没有激活？

index.js （主要）

import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import promise from 'redux-promise';
import createLogger from 'redux-logger';
import allReducers from './reducers';
import App from './components/App';

const logger = createLogger();
const store = createStore(
    allReducers,
    applyMiddleware(thunk, promise, logger)
);

ReactDOM.render(
    <Provider store={store}>
      <App />
    </Provider>,
    document.getElementById('root')
);

App.js

import React from 'react';
import NameList from '../containers/name-list.js'
import Input from '../containers/input.js'

const App = () => (
  <div>
    <Input />
    <hr />
    <NameList />
  </div>
);

export default App;

index.js （行动）

export const addName = (name) => {
    return {
        type: 'NAME_ADDED',
        payload: name
    }
};

减速器的附加name.js

export default function (state = null, action) {
    switch (action.type) {
        case 'NAME_ADDED':
            return action.payload;
            break;
    }
    return state;
}

index.js （reducer combiner）

import {combineReducers} from 'redux';
import AddNameReducer from './reducer-add-name';


const allReducers = combineReducers({
    nameList: AddNameReducer
});

export default allReducers

input.js

import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {addName} from '../actions/index'

class Input extends Component {
  render() {
    return(
      <div>
        <input id='name-input' />
        <button id='add-name-button' onClick={() => addName(document.getElementById('name-input').value)}>Add name</button>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    nameList: state.nameList
  };
}

function matchDispatchToProps(dispatch) {
  return bindActionCreators({addName: addName}, dispatch);
}

export default connect(mapStateToProps, matchDispatchToProps)(Input);

命名-list.js

import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';

class NameList extends Component {

  getNameList() {
    //This is where I'll loop through this.props.nameList and build the list of elements
    return this.props.nameList;
  }

  render() {
    return(
      <div>Current list : {this.getNameList()}</div>
    );
  }
}

function mapStateToProps(state) {
  return {
    nameList: state.nameList
  };
}

export default connect(mapStateToProps)(NameList);

感谢您的帮助！

Answer 1

我认为您的行动尚未发送。

在 input.js 中在按钮标签上，更改

onClick={() => addName(document.getElementById('name-input').value)}

到

onClick={() => this.props.addName(document.getElementById('name-input').value)}

应该通过mapDispatchToProps传递动作，'bindActionCreators（actions，dispatch）'将使用'dispatch'包装你的动作，并通过props'addName'传递你的组件。（在mapDispatchToProps中定义）

单独一个动作就像一个子弹（只是返回物体）你需要一些东西来解雇它（发送）

在你的情况下

import {addName} from '../actions/index' <--- a bullet

已经声明了你的onClick，没有派遣，它只返回一个纯粹的对象，而不是将它发送给reducer。

addName() // <--- Just a bullet

但是

this.props.addName() // <--- bullet with a gun

来自mapDispatchToProps / bindActionCreators ......它包含了dispatch（），就是我们要使用的那个。

Answer 2

您应该将现有状态与reducer-add-name.js中的新动作有效负载结合起来，而不是仅返回有效负载，即

。

return Object.assign({}, state, {
    todos: [
      ...state,
      {
        action.payload
      }
    ]
  })

Answer 3

不是OP的问题，而是对于刚刚在Google上搜索“减速器未调用”的人，请确保您致电您的动作创建者：

dispatch(action())

不是

dispatch(action)

您必须传递动作，而不是动作创建者。在Redux Toolkit中使用useSelect时，我通常在arg中没有括号，因此我忘了让父母加入对dispatch的呼叫。

Answer 4

今天发生在我身上。

使用类方法时，我忘了将新动作添加到React中已变形的道具中

const { newAction } = this.props

Redux - 减速器没有被调用

4 个答案: