Redux usage

Catalog

1,redux workflow

2. install redux

 3.redux Conceptual understanding

4. establish Redux Warehouse in -store and reducer

5.redux middleware ( Redux-thunk)

  install

6.combineReducers Use

---

 

1,redux workflow

 

2. install redux

npm i redux --save

 3.redux Conceptual understanding

redux It is a special tool for state management js library （ No react Plug-in library ）

Can be used in react,angular,vue In the project , Basic and react In combination with

effect ： Centralized management react The state shared by multiple components in the application

4. establish Redux Warehouse in -store and reducer

First , Create a store Folder , And then create a index.js file , Create another reducer.js file

import { createStore } from "redux";
// introduce reducer file 
import reducer from './reducer'
let store=createStore(reducer)
export default store

reducer.js file

const defaultState={
    value：‘ Zhang San ’,
    list:[
       ' Hello! ',
       'hello' 
    ]
}
// Business logic can be written here 
export default (state=defaultState,action)=>{
    return state
}

such , ordinary store and reducer Just set it up , Now we use store Warehouse

First, introduce

import store from './store'

Then we can print it store, The results are as follows , He has one getState() Method

  Then render us on the page getState Just the value inside

notes ：reducer receive calls only state, Can't change state

5.redux middleware ( Redux-thunk)

  install

npm i redux-thunk --save

To configure

import { createStore,applyMiddleware } from "redux";
import thunk from 'redux-thunk'
// introduce reducer file 
import reducer from './reducer'
let store=createStore(reducer,applyMiddleware(thunk))
export default store

creatStore Only two parameters can be received , If you want to define multiple parameters , We can use enhancement functions (compose)

Asynchronous processing is written in middleware Redux-thunk in

Resolve asynchrony action Out of commission function Method , If we don't use middleware , So if we are action Using functions in , Then he will report an error

6.combineReducers Use

effect ： Merge multiple reducer function

redux Of combineReducers() It's convenient to put redux Of reducer Split into small reducer file , Call their own reducer, Convenient unified management

creatStore Only two parameters can be received , If you want to define multiple parameters , We can deal with many reduce A merger , Use combineReducers

import { createStore,applyMiddleware,combineReducers } from "redux";
import countReduce  from '../reduces/count_reduce'   
import todoReduce from '../reduces/todolist_reduce'
import thunk from 'redux-thunk'
//  Use redux Officially provided merger reduce Method 
const allReducer = combineReducers({
    count:countReduce,
    todolist:todoReduce
})
//  The first parameter is all reduce, The second parameter is to support asynchronous action Middleware 
let store = createStore(allReducer,applyMiddleware(thunk))
export default store