Using react+redux to implement counter function and problems encountered

Redux is a simple state manager. We will not trace its history. From the perspective of usage: it provides a global object store, which contains a state object to contain all application data, and the store provides some reducer methods. These methods can be customized to allow the caller to change the value of the state. The value of the state is read-only and must only be changed through the reducer if it needs to be changed.

Redux

• Core Object: Store
• Data storage: state
• Status update submission interface: ==dispatch==
• Status update submission parameters: ==Action== with type and payload
• State update calculation: ==reducer==
• Limitation: reducer must be a pure function, does not support async
• Features: Support middleware

React + Redux

Problems encountered when not using redux in recat

In react, component communication is one-way. The top-level component can pass data to the lower-level component through the props attribute, but the lower-level component cannot pass data to the upper-level component. To modify the data of the lower-level component, the upper-level component needs to pass the method of modifying the data to the lower-level component. As the project becomes more and more, it becomes more and more difficult to pass data between components.

The benefits of adding redux to react

Use redux to manage data. Since Store is independent of components, data management is independent of components, which solves the problem of difficulty in transferring data between components.

Using redux

Download redux

npm install redux react-redux

Redux workflow

1. Components trigger actions through dispatch
2. The store accepts the action and dispatches it to the reducer
3. The reducer changes the state according to the action type and returns the changed data to the store
4. The component subscribes to the state in the store, and the state updates in the store will be synchronized to the component

Implementing a counter using react+redux

1. Create a project and install redux

# If the react scaffolding is not installed, execute this command to install the react scaffolding npm install -g create-react-app
# Create a react project create-react-app project name # Enter the project cd project name # Install redux
npm install redux reate-redux

2. Introduce redux and implement the counter in react according to the code implemented at the beginning

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { createStore } from 'redux';

const initialState = {
  count: 0
}
function reducer(state = initialState, action) {
  switch (action.type) {
    case 'increment':
      return {
        count: state.count + 1
      }
    case 'decrement':
      return {
        count: state.count - 1
      }

    default:
      return state
  }
}
const store = createStore(reducer)

const increment = {
  type: 'increment'
}

const decrement = {
  type: 'decrement'
}

function Count() {
  return <div>
    <button onClick={() => store.dispatch(increment)}>+</button>
    {store.getState().count}
    <button onClick={() => store.dispatch(decrement)}>-</button>
  </div>
}

store.subscribe( () => {
  console.log(store.getState())
  ReactDOM.render(
    <React.StrictMode>
      <Count />
    </React.StrictMode>,
    document.getElementById('root')
  );
})

ReactDOM.render(
  <React.StrictMode>
    <Count />
  </React.StrictMode>,
  document.getElementById('root')
);

Obviously, although the above method can realize the function of the counter, it cannot be used in actual projects, because components are generally in separate files, and this method obviously cannot obtain the Store in other components.

Counter case code optimization - make the store globally accessible

In order to solve the Store acquisition problem, we need to use react-redux to solve this problem. react-redux provides us with Provider components and connect methods

Provide Component

It is a component that can put the created store in a global place so that the component can get the store. Through the provider component, the store is placed in a place where the global component can reach. The provider requires us to put it in the outermost component.

connect

connect helps us subscribe to the state in the store and helps us re-render components when the state changes

Through the connect method we can get the state in the store and map the state in the store to props

The dispatch method can be obtained through the connect method

The parameter of connect is a function that can get the state in the store. It requires that this function must return an object. The content written in this object will be mapped to the props property of the component.

After the connect call, a function is returned. This function needs to be passed in to tell connect which component's props need to be mapped to.

Create a new Component folder and create a Count.js file

import React from 'react'

function Count() {
    return <div>
        <button onClick={() => store.dispatch(increment)}>+</button>
        {store.getState().count}
        <button onClick={() => store.dispatch(decrement)}>-</button>
    </div>
}

export default Count

Introduce the Provider component and place it in the outermost layer, and define the store

ReactDOM.render(
  // Use the provider component to put the store where the global component can reach it. The provider requires us to put it in the outermost component <Provider store={store}><Count /></Provider>,
  document.getElementById('root')
);

Introduce the connect method to wrap the component according to the use of connect

const mapStateProps = state => ({
    count: state.count,
    a: '1'
})
// The parameter of connect is a function. This function can get the status in the store. It requires that this function must return an object. The content written in this object will be mapped to the props property of the component. // After the connect call, a function is returned. The returned function needs to be passed in to tell connect which component's props need to be mapped to.
export default connect(mapStateProps)(Count)

Modify the Count component and copy the action to this file

const increment = {
    type: 'increment'
}

const decrement = {
    type: 'decrement'
}
function Count({count, dispatch}) {
    return <div>
        <button onClick={() => {dispatch(increment)}}>+</button>
        <span>{count}</span>
        <button onClick={() => {dispatch(decrement)}}>-</button>
    </div>
}

Now the project can be run, but the long code of the submit action in the Count component affects the readability of the view, so the code still needs to be optimized.

Counter case code optimization - make the code in the view more readable

We hope to call a function directly in the view so that the view code is readable. This requires the use of the second parameter of connect, which is a function whose parameter is the dispatch method. This function is required to return an object. The contents of the returned object will be mapped to the props property of the component.

Declare a variable as the second parameter in connect, and return the object that performs different action operations in this variable

// The second parameter of connect is a function. The parameter of this function is the dispatch method. It requires returning an object. The properties of this object will be mapped to the props of the component. const mapDispatchToProps = dispatch => ({
    increment () {
        dispatch({
            type: 'increment'
        })
    },
    decrement (){
        dispatch({
            type: 'decrement'
        })
    }
})

// The parameter of connect is a function. This function can get the status in the store. It requires that this function must return an object. The content written in this object will be mapped to the props property of the component. // After the connect call, a function is returned. The returned function needs to be passed in to tell connect which component's props need to be mapped to.
export default connect(mapStateProps, mapDispatchToProps)(Count)

Structure props in components and bind events directly in views

function Count({count,increment,decrement}) {
    return <div>
        <button onClick={increment}>+</button>
        <span>{count}</span>
        <button onClick={decrement}>-</button>
    </div>
}

Through this optimization, we found that the code for calling dispatch to trigger action is repeated, so we need to continue to optimize it.

Optimize the duplication of code in the method that calls dispatch to trigger action

Use bindActionCreators to simplify the dispatch trigger action operation, bindActionCreators to help us generate functions to execute action actions

bindActionCreators has two parameters, the first parameter is the object that executes the action, and the second parameter is the dispatch method

Separate the action operation, create a new store/actions/counter.actions.js file, put the action operation separately in this file and export it

export const increment = () => ({type: 'increment'})
export const decrement = () => ({type: 'decrement'})

Import the counter action in Count.js and use the bindActionCreators method to generate the dispatch execution action function

import { bindActionCreators } from 'redux'
import * as counterActions from './../store/actions/counter.actions'


const mapDispatchToProps = dispatch => (bindActionCreators(counterActions, dispatch))
// The parameter of connect is a function. This function can get the status in the store. It requires that this function must return an object. The content written in this object will be mapped to the props property of the component. // After the connect call, a function is returned. The returned function needs to be passed in to tell connect which component's props need to be mapped to.
export default connect(mapStateProps, mapDispatchToProps)(Count)

At this point in code optimization, we found that the redux code is integrated with the components, so I need to split it into independent ones. Why should I extract redux? Because we want to make our code structure more reasonable

Refactor the counter and extract the redux related code

Extract the reducer function into a separate file and extract the store creation into a separate file

Because we wrote strings in both reducer and actions, but there is no prompt for the string, so we define the string as a constant to prevent us from making low-level mistakes such as word errors. Create a new src/store/const/counter.const.js file

export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

Create a new src/store/reducers/counter.reducers.js file and extract the reducer function into this file

import { INCREMENT, DECREMENT} from './../const/counter.const'
const initialState = {
    count: 0
}
// eslint-disable-next-line import/no-anonymous-default-export
export default (state = initialState, action) => {
    switch (action.type) {
        case INCREMENT:
            return {
                count: state.count + 1
            }
        case DECREMENT:
            return {
                count: state.count - 1
            }

        default:
            return state
    }
}

Change the string in actions to an imported variable

import { INCREMENT, DECREMENT} from './../const/counter.const'

export const increment = () => ({type: INCREMENT})
export const decrement = () => ({type: DECREMENT})

Create a src/store/index.js file, create a store in this file and export it

import { createStore } from 'redux';
import reducer from './reducers/counter.reducers'

export const store = createStore(reducer)

In the file that imports the store, change it to import the store in the store file in the project

import React from 'react';
import ReactDOM from 'react-dom';
import Count from './components/Count';
import { store } from './store'
import { Provider } from 'react-redux'
/**
 * react-redux is a perfect combination of react and redux * Provider is a component that can put the created store in a global place so that components can get the store
* connect is a method */


ReactDOM.render(
  // Use the provider component to put the store where the global component can reach it. The provider requires us to put it in the outermost component <Provider store={store}><Count /></Provider>,
  document.getElementById('root')
);

Passing parameters to action, extending the counter case

This counter example has implemented the operation of adding one or subtracting one by clicking a button. Now there is a new requirement that we need to add or subtract a value, such as adding five or subtracting five.

This requires passing parameters to the action

In the view, the button binds the function to pass in parameters

function Count({count,increment,decrement}) {
    return <div>
        <button onClick={() => increment(5)}>+</button>
        <span>{count}</span>
        <button onClick={() => decrement(5)}>-</button>
    </div>
}

When dispacth executes an action, it accepts parameters and passes them into the action

export const increment = payload => ({type: INCREMENT, payload})
export const decrement = payload => ({type: DECREMENT, payload})

Receive parameters in reducers and process them accordingly

export default (state = initialState, action) => {
    switch (action.type) {
        case INCREMENT:
            return {
                count: state.count + action.payload
            }
        case DECREMENT:
            return {
                count: state.count - action.payload
            }

        default:
            return state
    }
}

Original URL: https://kspf.xyz/archives/10/

This is the end of this article about using redux in react and implementing a counter case. For more relevant react redux counter implementation content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!