• npm
• yarn
• npm
• yarn

So, you have been working on your React project. Maybe you have heard about Redux and how it can make it all better and need some help getting started.

What is Redux? # (https://blog.meain.io/2018/connect-redux-to-react/#what-is-redux%3F) Hmm, good question. It is like this master thingy which handles the state of all your components rather than handling the state in the components. So what you do is when you need to make a change that affects something else ( ie something you would store in the state or pass up to the parent component ) you pass it over to Redux ( loosely speaking ). From there you can user Redux to send the data to where it is needed.

So, how do you connect? # (https://blog.meain.io/2018/connect-redux-to-react/#so%2C-how-do-you-connect%3F) Create React project # (https://blog.meain.io/2018/connect-redux-to-react/#create-react-project) Let us get stated by creating a React project. I am using create-react-app (https://github.com/facebookincubator/create-react-app).

create-react-app redux-example This will bootstrap your react project, but without Redux. Your file structure will look something like:

. ├── README.md ├── node_modules ├── package.json ├── public ├── src └── yarn.lock

Install redux and react-redux # (https://blog.meain.io/2018/connect-redux-to-react/#install-redux-and-react-redux) Now we install the redux library as well as react-redux library to connect react and redux together.

redux # (https://blog.meain.io/2018/connect-redux-to-react/#redux)

§npm

npm install redux

§yarn

yarn add redux react-redux # (https://blog.meain.io/2018/connect-redux-to-react/#react-redux)

§npm

npm install react-redux

§yarn

yarn add react-redux Creating necessary files # (https://blog.meain.io/2018/connect-redux-to-react/#creating-necessary-files) Create redux.js file in /src directory.

import { createStore } from ‘redux’;

// create initial state const initialState = {}

// create reducer const reducer = ( state = initialState, action ) => { // branch using switch switch(action.type){ case ‘FIRST-ACTION’: state = { …state, …action.payload } break } return state }

// create store const store = createStore(reducer) // export export default store

You can use combine-reducers (https://redux.js.org/docs/api/combineReducers.html) combine multiple reducers

Add redux into the react mix # (https://blog.meain.io/2018/connect-redux-to-react/#add-redux-into-the-react-mix) In /src/index.js

Add import for react-redux and store # (https://blog.meain.io/2018/connect-redux-to-react/#add-import-for-react-redux-and-store) import { Provider } from ‘react-redux’

import store from ‘./redux.js’ Change the render function to # (https://blog.meain.io/2018/connect-redux-to-react/#change-the-render-function-to) ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById(‘root’)) Use ’em in the code # (https://blog.meain.io/2018/connect-redux-to-react/#use-'em-in-the-code) In your component file

Import connect from react-redux

import { connect } from ‘react-redux’ Now at the bottom, do some magic to add stuff from redux as props.

const mapStateToProps = state => { return { user: state.user, threads: state.threads } }

const mapDispatchToProps = dispatch => { return { userChanged: threads => { dispatch({ type: ‘USER_UPDATED’, payload: user }) }, }

export default connect(mapStateToProps, mapDispatchToProps)(App) And there you go ;) # (https://blog.meain.io/2018/connect-redux-to-react/#and-there-you-go-%3B)) I have tried to keep it really simple, more like a cheat sheet rather than an explanation because I think that is more important for most people. Feel free to ping me if you need any help.