Redux

Question

我正在尝试学习 Redux。我遵循了在线教程并使用了他们的示例，并且效果很好。然后我制作了另一个小型测试应用程序并且运行良好。现在我正在尝试另一个小型测试应用程序，但我一直卡在这个错误上，不知道为什么。

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

但是，reducer 没有更新状态。我查看了导致此问题的常见问题，但似乎无法在我的错误中找到这些错误，我的 reducer 没有更改状态，我已经绑定了 dispatch 等等。也许我只是在某个地方拼错了一些东西（或者像这样的小而愚蠢的东西）但我就是无法让它工作。

所以我试图改变它，让它只显示你在下面的框中输入的任何内容，但它仍然不起作用。有人知道为什么减速器没有激活吗？

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

reducer-add-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

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

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

Answer 2

我认为你的行动还没有被派遣。

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

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

到

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

事情是动作应该通过 mapDispatchToProps 传递，'bindActionCreators(actions, dispatch)' 将用 'dispatch' 包装你的动作，并通过道具 'addName' 传递你的组件。（在您的 mapDispatchToProps 中定义）

一个单独的动作就像一颗子弹（只是 return 物体）你需要一些东西来发射它（调度）

你的情况

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

已经声明，你的 onClick，如果没有调度，它只会 return 只是一个对象，不会将它调度到 reducer。

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

但是

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

来自 mapDispatchToProps / bindActionCreators...它包裹着 dispatch()，这就是我们要使用的。

Answer 3

今天发生在我身上。

我在使用 class 方法时忘记将我的新动作添加到 React 中的解构道具中

const { newAction } = this.props

Answer 4

不是 OP 的问题，而是对于刚刚搜索 Google“reducer not getting called”的人来说，请务必致电您的 action creator：

dispatch(action())

没有

dispatch(action)

你必须传入动作，而不是动作创建者。在 Redux Toolkit 中使用 useSelect 我通常在 arg 中没有 parens 所以我忘了在 dispatch.

的调用中放入 parents

Redux - reducer 没有被调用

Redux - reducer not getting called

state

reactjs