We use Redux in React

What’s a redux?

Redux is a state management and update tool that changes state by sending out actions. Using Redux makes the code we write predictable and testable, ensuring that it executes in the direction we expect.

Redux constitute

A redux is made up of the following parts

State: Applies the real data source

View: The current application state UI

Action: Changes the state state and updates it based on events that the user has acted on

Unidirectional data flow

State describes the state at a specific point in time

Render the View based on state

The user sets off the event, and state generates a new state based on state

immutability

Arrays are mutable, for example

Let obj = {name: 'name ', age: Let arr = ['a', 'b'] arr. Push ('c') arr[1] = 'd'Copy the code

But state is immutable, and that makes it impossible for us to change the array like an array. If we don’t want to change the array, we have to make a copy of the array, and then update the copy

Const obj = {a: {c: 3}, b: 2} const obj = {a: {c: 3}, b: 2} Obj, // overwrite a a: {// backup of obj. }} const arr = ['a', 'b'] const arr = ['a', 'b'] Const arR2 = arr.concat('c') const arr3 = arr.slice() arR3.push ('c')Copy the code

This is immutability. The state can change the copied state, but the fact cannot change the original state

Create redux and process saga asynchronously (do a simple counter)- > do sync first and then async for easy understanding

So let’s create a React app

npx create-react-app rduxsaga

Install redux Rereact – Redux Redux-Saga

npm install redux react-redux redux-saga -S

2. Create the store, index.js, action.js, actionType.js, and reducer

Create a variable (action state) in actionType.js

export const ADD = 'ADD';

Copy the code

ActionType. Js is introduced into reducer. Js to compare the incoming action states

import * as actionType from './actiopType'; const reducer = (state = { number: 0 }, action) => { switch (action.type) { case actionType.ADD: return { number: state.number + 1 }; default: return state; }}; export default reducer;Copy the code

Js and actionType.js are introduced into index.js and the Store reducer is created with createStore

// createStore createStore reducer actionType // import createStore import {createStore} from 'redux'; // Import the import reducer from './reducer'; let store = createStore(reducer); // Export store export default store; /** * store * ={* getState * subscribe * subscribe * dispatch *} */Copy the code

3. The preliminary warehouse preparation is almost complete, then use the store in the outermost entry file index.js

import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; Import store from './store'; import App from './App'; ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') );Copy the code

4. Also create an actions.js that makes it easy to call the actions in a unified way

// Import actionType import * as actionType from './actiopType'; Const Actions = {add() {// Return an action return {type: actionType.add}; }}; export default actions;Copy the code

5. Start using app.js (details are marked and commented)

import React, { Component } from 'react'; import actions from './store/action'; Import {connect} from 'react-redux'; Class App extends Component {render() {return (<div> {this.props. Number) <p> <button onClick={this.props. Add}>+</button> </div>); } } let mapStateToProps = (state) => state; Export default connect(mapStateToProps); // map the repository state to the component attribute and change the component state into the component props. You can use this. Props to get the repository state -----> you can get the state actions // Action will also become the component book attribute --------> You can get the reducer )(App); /** * Connect the component to the storehouse * input inputs the state of the component into the component * output outputs the state of the component into the storehouse to write the state to the storehouse */Copy the code

6. Run, a synchronized store is ready, to achieve a synchronized counter