组件中的Redux状态 [英] Redux State in Component
问题描述
试图弄清楚如何将Redux存储状态从Redux拉到我的组件中。我已经连接了mapStateToProps和连接。但是,当我单击应用组件中的按钮时,this.props中没有Redux值。
trying to figure out how to pull Redux store state into my component from Redux. I've got mapStateToProps and "connect" wired up. However, when I click my button in "App" component, this.props doesn't have my Redux values in it.
// 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());
推荐答案
好像有几个问题。
首先,它有助于理解 connect()(MyComponent)
返回一个新的包装组件您的真实组件。在您的示例中,您调用 connect()
之后,您渲染了< App />
,和,您实际上并没有保存和使用 connect()
生成的组件。您需要的是这样的东西:
First, it helps to understand that connect()(MyComponent)
returns a new component that "wraps" around your "real" component. In your example, you're calling connect()
after you've rendered <App />
, and you aren't actually saving and using the component generated by connect()
. What you need is something like:
let store = createStore(rootReducer)
const ConnectedApp = connect(mapStateToProps)(App);
render(
<Provider store={store}>
<ConnectedApp />
</Provider>
, document.querySelector('#app')
);
第二,连接组件的部分目的是它实际上不应直接引用商店。 connect()
可以采用第二个参数,称为 mapDispatchToProps
。如果您不提供 mapDispatch
参数,它将自动为您的组件提供 this.props.dispatch
。因此,您的App组件应以以下内容开头:
Second, part of the point of connecting a component is that it shouldn't actually reference the store directly. connect()
can take a second parameter, known as mapDispatchToProps
. If you don't supply a mapDispatch
parameter, it will automatically give your component this.props.dispatch
. So, your App component should look like this to start with:
class App extends Component{
buttonClicked(){
this.props.dispatch({type: 'ADD_TWEET', payload: 'This is my first tweet!'});
console.log(this.props)
}
这应该足够使App组件从Redux接收数据并调度操作。
That should be enough to get the App component receiving data from Redux and dispatching actions.
这篇关于组件中的Redux状态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!