First, install redux with: npm install --save redux
and install react-redux with: npm install --save react-redux
In the top level of your component tree, import createStore
from redux, and use it to create a new store with a simple reducer:
import { createStore } from 'redux'
const rootReducer = (state = {}, action) => {
return state
}
const store = createStore(rootReducer)
Also import Provider
from react-redux:
import { Provider } from 'react-redux'
And then wrap your app's components with a Provider
component, and pass in your store
as a prop:
<Provider store={store}>
...
</Provider>
Then, you can connect any sub components with the connect
function, by first importing it:
import { connect } from 'react-redux'
And then calling it with a mapStateToProps
or mapDispatchToProps
argument, and then passing in the unconnected component:
const ConnectedLoginGate = connect(state => ({
username: state.auth.username
}))(LoginGate)