Redux - 减速器没有被调用

Question

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

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

但是,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
    }
};

减速机加,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 On按钮标签中,更改

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(),这就是我们要使用的那个.