我正试图弄清楚如何从Redux将Redux存储状态拉入我的组件。我把mapStateToProps
和connect
连上了。但是,当我在App
组件中单击按钮时,this.props
中没有我的Redux值。
// React and Redux Const
const { Component } = React;
const { render } = ReactDOM;
const { Provider, connect } = ReactRedux;
const {createStore, combineReducers, bindActionCreators } = Redux;
function tweetReducer(state=[],action) {
if(action.type === 'ADD_TWEET') {
return state.concat({ id: Date.now(), tweet: action.payload})
} else {
return state;
}
}
const rootReducer = combineReducers ({
state: (state = {}) => state,
tweets: tweetReducer
});
class App extends Component{
buttonClicked() {
store.dispatch({type: 'ADD_TWEET', payload: 'This is my first
tweet!'});
console.log(this.props)
}
render() {
return (
<div>
<h5>Hello from App</h5>
<button onClick={this.buttonClicked.bind(this)}>Button</button>
<div>-------------------</div>
<Display />
</div>
)
}
}
class Display extends Component {
render() {
return (
<div>
<h3>Tweets:</h3>
{this.props.tweets}
</div>
)
}
}
function mapStateToProps(state) {
console.log('mapping state to props')
return {
tweets: state.tweets
}
}
let store = createStore(rootReducer)
render (
<Provider store={store}>
<App />
</Provider>
, document.querySelector('#app')
);
connect(mapStateToProps)(App)
console.log(store.getState());
2条答案
按热度按时间qojgxg4l1#
看起来你有几个问题
首先,它有助于理解
connect()(MyComponent)
返回一个“ Package ”在“真实的”组件周围的新组件。在您的示例中,您在 * 呈现<App />
* 之后调用connect()
,* 并且 * 您实际上并没有保存和使用connect()
生成的组件。你需要的是这样的东西:第二,连接组件的部分意义在于它实际上不应该直接引用存储。
connect()
可以接受第二个参数,称为mapDispatchToProps
。如果您不提供mapDispatch
参数,它将自动给予您的组件this.props.dispatch
。所以,你的App组件应该看起来像这样开始:这应该足以让App组件从Redux接收数据并分发操作。
nhaq1z212#
这就是您应该如何继续获取组件中的存储状态。
1)创建reducers文件夹并创建新文件index.js
/* reducers/tweetReducer.js */
/* 组件/App. js */
/* 组件/Display. js */
/*Main.js */
/* store/index.js */