【发布时间】：2017-03-12 01:51:55
【问题描述】：
我正在努力学习 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
}
};
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);
感谢您的帮助！
【问题讨论】：
-
检查控制台是否有任何错误。我也看不到你的 reducer 导出 AddNameReducer（在 index.js 中导入），但你可能只是错过了这篇文章而不是真正的代码。
-
在任何时候都没有控制台错误。而AddNameReducer只是reducer-add-name.js文件，是单个导出函数。
-
input.js 中的 connect 函数将 dispatch 方法映射到 Input 组件的 props。那么当 Input 组件的渲染函数调用 addName 时，它会期望将 this 作为 prop 引用吗？ （所以试试 this.props.addName）