reactjs - Redux - reducer 没有被调用

Question

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

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

但是，reducer 并未更新状态。我已经查看了导致此问题的常见问题，但似乎无法在我的问题中找到这些错误，我的 reducer 不会更改状态并且我已经绑定(bind)了调度等等。也许我只是在某个地方拼错了一些东西(或者类似的小而愚蠢的东西)，但我就是无法让它工作。

所以我尝试更改它，以便它只显示您在下面的框中键入的任何内容，但它仍然不起作用。有人知道为什么 reducer 没有激活吗？

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 组合器)

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

name-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)}

事情是action应该通过mapDispatchToProps传递，并且“bindActionCreators(actions,dispatch)”将用“dispatch”包装你的action，并通过props“addName”传递你的组件。 (如您的mapDispatchToProps中所定义)

单独的一个 Action 就像一颗子弹(只是返回对象)，你需要一些东西来发射它(调度)

就你的情况

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

已经声明并且你的onClick，没有调度，它只会返回一个单纯的对象，不会将其调度到reducer。

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

但是

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

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