DEV Community

Cover image for Understand React Redux - Introduction
Ebraim Carvalho
Ebraim Carvalho

Posted on

Understand React Redux - Introduction

#react #redux #frontend #javascript

This month, I started to learn more about Redux, so I decided to write a basic post with my knowledge of Redux with React. I am also learning, so correct me if there is an error.

For Redux, you need some things:

  • Reducer: A function that manages your actions and return a new state;
  • Actions: A function that tells your reducer what it needs to do;
  • Store: A state that will pass to our application;

There is a recomendation to focus our variables that define our actions, defining a string to a constant.

Let's look at an example, first our Reducer and Actions:

// our constant with a string type const ADD = 'ADD'; // our action creator, needs to be a pure function const addMessage = (message) => { return { type: ADD, message: message } } // our reducer, also needs to be a pure function const messageReducer = (state = [], action) => { switch(action.type) { case ADD : // join the new message with the others return [...state, action.message] default : return state } } // need to import {createStore} from 'redux' const store = createStore(messageReducer)

That's it, our state are ready. Now we need to call it on our component to read the state or send an action. Let's see how we can do that:

import {useState} from 'react'; import { Provider, connect } from "react-redux"; const Presentational = (props) => { const [input, setInput] = useState('') const handleChange = (e) => { setInput(e.target.value) } const handleSubmit = () => { // we can call through the props because we use mapDispatchToProps below props.submitNewMessage(input) setInput('') } return ( <div> <h2>Type a new message:</h2>  <input type="text" value={input} onChange={handleChange} />  <button onClick={handleSubmit}>Submit new message</button>  <ul> // we can read through the props because we use mapStateToProps below {props.messages.map((message, index) => ( <li key={index}>{message}</li>  ))} </ul>  </div>  ) } const mapStateToProps = (state) => { return {messages: state} }; const mapDispatchToProps = (dispatch) => { // if we has another action, we will pass in this object return { submitNewMessage: (message) => { dispatch(addMessage(message)) } } } // connect all of this things in a Container wrapper const Container = connect(mapStateToProps, mapDispatchToProps)(Presentational); const App = () => { return ( // here the magic happens <Provider store={store}> <Container /> </Provider>  ) }

That's it, I'm learning and that's what I understood so far, what did you think of redux?

Top comments (0)