My first approach to React was enough to fall in love with this framework: it's easy to work with, has a simple syntax, and it's so fast that you can build a simple application in less than a day. Using React on your app allows you to update the information you display on the browser without having to reload the whole page, as it works with a . virtual DOM One of the best characteristics React has is the state. It is a way to store your app's component data, keep track of the changes, and then render them faster than using only JavaScript. However, once your app starts growing, managing tens of states in multiple containers starts getting difficult and becomes inefficient. That's where Redux comes into play. is an amazing tool that allows you to keep all your application's state in one centralized . Redux store Each component's state will now be handled by your Redux store and it will be available for the rest of your application's components without having to send it as from parent to child. What's the advantage? props That way it's so easy to work with that centralized store instead of having to navigate through all your containers trying to find where you were passing the props you need when you want to add or change them. Moreover, using Redux ensures you follow a specific path to modify the state, making it almost impossible to change it directly ( ). All this while being incredibly easy to set up. something you already know you shouldn't do Before you start Got hooked? Ok, let's add Redux to your application. You will need a running app that uses React. I won't talk you through that process in this article, but you can check the if you need help. React documentation Just in case, I will remind you of some key concepts I will be talking about in this article: : the object that contains the state of the application. Store s: objects that describe you want to change on the Redux store's state. Action what : functions that handle actions and tell the Redux store to modify the state. Reducers how The above it's a great graphic representation of how Redux works. With that in mind, let's get to work! image Data Flow Installing and Setting Up Redux To on your app, you will need to use . On your terminal, cd into your project's directory and type . This will not only install Redux but also add another package (react-redux) to connect your app with the Redux store. install Redux Node npm install redux react-redux Since you are working on an already functional React app, you will only need to add and change a few things on your components to connect them to the new store that will handle the state. I will explain the process in a somewhat reverse way: you will create the store, link the reducers, then build them, and finally, you will create the actions file. The above process will need you to import files and functions before creating them. I believe this way is better because you get to see the big picture first and then work with the details, making it less likely to miss a step. This is the file where rendering to the DOM. In there, you will need to: and also . With those functions you will create the where your app's state will live, and then make it available to all the components using the . Your index.js file should look something like this: 1. Edit to your index.js import { createStore } from 'react-redux' import { Provider } from 'Redux' Redux store Provider React ; ReactDOM ; ; { createStore } ; { Provider } ; App ; rootReducer ; store = createStore(rootReducer); ReactDOM.render( <Provider store={store}><App /></Provider> import from 'react' import from 'react-dom' import './index.css' import from 'redux' import from 'react-redux' import from './App' import from './store/reducers/rootReducer' const < > React.StrictMode , document.getElementById('root'), ); </ > React.StrictMode Notice how you need to create the store using that takes a reducer as an argument (you will create the reducer next). Also, remember to enclose your App component by the component you just imported and passing the as a prop. const store = createStore(rootReducer) Provider store On the above example you already are importing a called from the corresponding location and passing it as an argument to . 2. Create the rootReducer file reducer rootReducer createStore() rootReducer ; store = createStore(rootReducer); import from './store/reducers/rootReducer' const Depending on the size of your application you can have one or more reducers to specify how the application's state changes. That is perfect, as long as you connect all of them using the rootReducer. Now let's create that file in the proper location and start working with it. First, you need to . This will allow you to connect all the reducers your application has. In this case I'm using only two, but you can have as many as needed (remember to import them, too). import { combineReducers } from 'redux' { combineReducers } ; authReducer ; postReducer ; rootReducer = combineReducers({ : authReducer, : postReducer, }); rootReducer; import from 'redux' import from './authReducer' import from './postReducer' const auth posts export default The above code shows how to import all the reducers your app has (remember we are going backward, but you can create them before adding them to the rootReducer, it's your choice). As you can see, takes an object as an argument (if you have more than one reducer). The object's key will be the name of the state (and you will use this exact name in your components), and the object's value will specify which reducer to use to change the Redux state. combineReducers() There are other ways to set up the rootReducer and to use this method. You can check more details on the Redux documentation and . here here 3. Create the reducers Let's say you are building a collective blog and you want to keep track of the posts your users create and update them on the main page. You will need a reducer to track the state and render it when it changes. A reducer is just a function that explains to modify your state, depending on the given action (more on that later). how A good practice is to keep all your reducers (including the rootReducer) in a Reducers folder Now, on your reducer file, you will need: 1) an that stores a default version of your state (your app will use it the first time), and 2) the . initialState reducer function You should pay attention to the name of your reducer and make sure it is the same you included on the rootReducer file. initState = { : [], }; postReducer = { (action.type === ) { post = { : action.id, : action.title, : action.category, }; nextPosts = { ...state.posts, post }; { ...state, : nextPosts }; } state; } postReducer; const posts const ( ) => state = initState, action if 'CREATE_POST' const id title category const // state.posts is refering to the key of the rootReducer return posts // adds the new object to the current state return export default As you can see, the reducer function takes and as arguments. It then checks all the actions to find the match and make the adjustments to the state. initState action In the example above, I am using the action to create a new post and then add it to the current that I previously referred to on the rootReducer. After that, I return a new object with the final state and the modified . 'CREATE_POST' state.posts posts.state 4. Actions and actions' creators Now, where does that come from? It is a type of . Actions are the way you communicate with the store. It's the only information that will be sent to it. 'CREATE_POST' action You can start by creating an folder to store your action files. To follow the example above, that folder would contain a file that looks like this: actions postActions.js { { : , title, content, }; } { { : , id, }; } // This is the action creator export ( ) function addPost title, content // This is the action return type 'ADD_POST' // This is the action creator export ( ) function deletePost id // This is the action return type 'DELETE_POST' The code above shows a list of or functions that enclose and return objects called . This function is the one you will call in the component when you want to update the state. action creators actions You can add as many actions and action creators as you need. I will just include two to and posts. Inside each action, you need to return the action's to indicate what action to choose when sending the information to the store. create delete type Each action will take different arguments, depending on the necessary information to change the state. Those arguments are also returned. For example, takes two arguments: and to create a new post. You need to return them inside each action so that they are accessible to change the state. addPost() title content 5. Connect your component to the Redux store Ok, remember we are going backward. This is the final step. Up until now, you haven't changed anything on your app, just added more files. Now will be the time to get rid of the state you have on each component and instead connect them to the store. To do this, we will import a function called into our component's file. { connect } from 'react-redux' React ; PostSummary ; { connect } ; PostList = { { posts } = props; ( <PostSummary post={post} key={post.id} /> ))} </div> import from 'react' import from './PostSummary' import from 'react-redux' const => props const return {posts && posts.map(post => ( < = > div className "post-list section" ) }; const mapStateToProps = state => ({ posts: state.posts, }); export default connect(mapStateToProps)(PostList); This is a usual component that uses Redux to store the state. Don't worry if you don't understand everything, I will dissect it in a few. Following the blog example, this would be the component that renders the list of posts. It doesn't have a state (we don't need it) but we are passing some . props I am using destructuring to create the constant from the props. That constat it's an array with a list of all the posts taken directly from the Redux store. posts How is that happening? The code is including a : mapStateToProps() mapStateToProps = ({ : state.posts, }); const => state posts This function takes the application's state as a parameter and then returns an object with the piece of state that you need, and passes it to the component in the form of props. After setting that up, you need to: Export the component while calling . connect() Pass the recently created as an argument. mapStateToProps() Add the component's name between parenthesis. You can read more about how works, . connect() here connect(mapStateToProps)(PostList); export default Then, the PostList component can connect to the Redux store, grab the posts from the state, and then render it or do whatever we want with it. But, how do we the state? In a very similar way, we can add another function that will one of our action creators and modify the state without changing something we don't want to. change dispatch mapDispatchToProps = ({ : { dispatch(addPost(post.title, post.content)); }, }); connect(mapStateToProps, mapDispatchToProps)(PostList); const => dispatch addPost => post export default Don't be intimidated by the code above. I will explain line by line and you can also check this . thorough explanation On the first line, takes as the first argument. On line two, it returns a new function with as the argument. mapDispatchToProps() dispatch() addPost() post Finally, on the third line, the function calls inside, and passes the action creator as the argument. If you remember, takes the post's title and content as arguments, so we need to pass them, too as and . dispatch() addPost() addPost() post.title post.content It might be confusing to see two but please keep in mind that they are not the same. You could easily change the first name to something entirely different with no errors, but you can't do the same with the second one, since it's referring to the action creator. addPost() addPost() That's why you should also remember to import the action creator using in the beginning of your file. import { addPost } from '../actions/' With we are not only connecting to the Redux store but also making use of the previously created actions and reducers to change the store's state. mapDispatchToProps() You can return multiple functions inside , depending on what you want your component to do and how you want it to interact with your application's state. mapDispatchToProps() As you will see after migrating all the component states to one centralized store, your application's flow will be more organized and you will be able to access the state from anywhere, making your website more flexible. A quick reminder: not all component states are useless when working with Redux, and when you want your Redux store to handle some parts of the state, and your components another part. there will be cases And that's it! You should have a fully functional React - Redux application! : Overview Install and . redux react-redux Create the and enclose your with the . store app component Provider Create your with connect(). rootReducer Create the individual reducers (if necessary). Build your . action creators Create and functions on your components. mapStateToProps() mapDispatchToProps() Export your component with connect(). Delete your previous component state. I would love to hear from you! Please send a message with your feedback on this article to any of my social media / / Twitter LinkedIn Github
![featured image - Integrating Redux to your React App [A Step by Step Guide]](https://hackernoon.imgix.net/drafts/vz3qu3y8i.png?auto=format&fit=max&w=1920)
