Add Redux to an Existing React Native Application
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)
Instructor: [00:00] In the terminal, in the root of your existing React's Native project, install Redux with npm install --save redux. To connect Redux to your existing Native components, you'll also have to install React Redux with npm install --save react-redux.
[00:22] To create the Redux store, import createStore from Redux. Create your first reducer by just defining a function that takes in a state and an action and returns the same state.
[00:34] Create the Redux store by passing that reducer to the createStore function from Redux. Now, we can provide that store to our component. Import provider from React Redux, and then place a provider component around your entire application and pass in the store that we just created as a prop.
[00:52] This is going in the app.js file because it's the highest point in the component tree that needs access to Redux. You may choose a different location for your application, but the provider has to wrap in the component that you want to have access to the store.
[01:06] We can run that to make sure we haven't broken anything. It still works. Let's continue by extracting the root reducer out of the app component file.
[01:17] Create a folder called reducers, and inside of that, a file called index.js. I know I'll eventually want more than one reducer. Import combine reducers from Redux. The first thing I want to convert from local state is the login piece.
[01:32] I'll make my first reducer called auth. Pass that to combine reducers, which takes an object with the reducers as the values. Now, make a new auth reducer file and export the simplest possible reducer, which is a function that takes a state and an action, then returns a new state.
[01:51] Back in app.js, delete the old reducer and import the new reducer. Import connect from React Redux, which we can use to connect our component to the store. We can't connect the app component itself, however, because it contains the provider component. We'll need to make a new child component.
[02:12] We can connect the login gate component and pull out the username from the auth reducer. Use that new connecting component in the apps render method. We are pulling the username from the store now so we can remove all the internal state that deals with the username.
[02:30] We still have to put the username into the redux state on login. In the login component file, import connect from React Redux. We can export a new connecting component that makes an on login action available, which this patches a new login action.
[02:51] Finally, we can change the auth reducer at the end of the new login action, and put the username into the Redux store. When we reload now, you can log in, and it's using Redux to store the username instead of local state.
[03:05] There is one more thing that we could clean up, which is the on login action. Make a new folder called actions and a new file called auth.js. In there, we can make our new on login action. Back in the login component, we can import and use that action, which cleans up our connect statement significantly.