State management in React with Redux

Facebook released a tool to create React Apps with no need for configurations. If you’re just beginning to learn React, you might want to use create-react-app and get started Immediately.

npm install -g create-react-app
create-react-app react-redux-example
cd react-redux-example/
npm start

Redux is a state management tool for react. It’s the most popular tool used to manage state.

npm install --save redux

There is a official React bindings for Redux. We can use that for easy binding.

npm install --save react-redux

So we are ready to start with React and Redux

How to connect React to the Redux store?

Import React, ReactDOM, createStore from redux and Provider from react-redux

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'

Create your store with reducer. We can use a simple basic reducer here…

function reducer(state = [], action) {
  switch (action.type) {
    case 'ADD_ACTION':
      return [...state, action]
    default:
      return state
  }
}
let store = createStore(reducer)

Use the provider to bind the store in all component

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

Now the store is available in all component. We can import connect from react-redux to get the state in components.

Import connect in your component first

import { connect } from 'react-redux'

Use connect to connect the component with the store

export default connect()(YourComponentName)

Use mapStateToProps and mapDispatchToProps to map the State and Dispatch to the props

This article originally appeared on lightrains.com