react中redux的流程_react setstate「建议收藏」

Redux

redux是React技术栈使用最为广泛的状态管理

怎么学习Redux

记住“三个三”
第一个“三”（3个api）:createStore、combineReducers、applyMiddleware
第二个“三”（3个特点）:单一数据源、store只读、使用reducer纯函数修改store
第三个“三”（3个概念）:State、Action、Reducer

安装Redux

  npm i redux react-redux -S

Redux的简单案例

redux的状态管理配置

import { 
    
createStore
} from 'redux'
/** * 初始化可共享的状态数据 */ 
const initState = { 
    
    msg: 'hello Redux',
    num: 1
}
/** reducer一个函数 接受的参数为一个当前状态值（state）和一个对当前状值进行修改的对象方法（action） * reducer函数的格式为 (state,action) => newState * 注意：action =(type , payload,...) 其中前两项必须是这么写 redux规定了只能这么定义，使用其他变量就会报错 * reducer的state必须要为**对象、数组、原始数据**,其中根state通常是一个对象。你应该在状态改变时返回一个新的对象 newState */

/** **项目只有一个store时** */
function reducer(state=initState,action){ 
    
 //action可以直接写为(type,payload)如果不写我们可以用action来结构
  const { 
    type,payload} = action
	// 注意：我们不能直接改变state的值，我们需要对其进行深复制后再进行改变
  const  newState = JSON.parse(JSON.stringify(state))
  switch(type){ 
    
    //当前端穿过来的type为’add‘时，触发下面的方法
    case 'add':
    	newState.num += payload
    break;
    ...
  }
   //最后抛出新值并存储在store中
   return newState 
}

/** * 创建一个redux store来存储状态值 * API是{ subscribe, dispatch, getState } */
const store = createStore(reducer)

当一个项目需要分多个子store时

// combineReducers 用于合并多个子store
import { 
     createStore,combineReducers } from 'redux'

//这个里面存放子store——user的信息
 import user from '/user' 

const reducer = combineReducers({ 
    user,...})
const store = createStore(reducer)
export default store

引入redux状态管理

import React from 'react';
import { 
    Provider} from 'react-redux';
import store from './store';//引入store数据

function App() { 
    
 return (
   <Provider store={ 
    store}>
     <T />
   </Provider>
 );
}
export default App;

redux状态管理 在JSX组件中的使用

/** * 使用connect将组件与状态管理链接起来 * connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options]) * mapStateToProps :将store.getState()返回的状态数据放在组件的props上 * mapDispatchToProps :用于建立组件跟store.dispatch的映射关系， 允许我们将 store中的dispatch方法,绑定到组件的props中。 *... */
import React from 'react';
import { 
     connect } from 'react-redux';
export default connect(
    // 此处为mapStateToProps
    (state) => { 
    
        //do somethings
        return { 
     state }
    },
    //此处为mapDispatchToProps
    (dispath) => ({ 
    
        add: payload => dispath({ 
     type: 'add', payload })
    })
)((props) => { 
    
    const { 
     state, add } = props
    return (
        <div>
            <h1>Redux的简单测试</h1>
            <h3>{ 
    state.reducer.num}</h3>
            <button onClick={ 
    () => add(1)}>自增+1</button>
            <button onClick={ 
    () => add(2)}>自增+2</button>
            <button onClick={ 
    () => add(-1)}>自增-1</button>
        </div>
    )
})

使用HOOK语法

import React from "react";
import { 
    useSelector, useDispatch } from "react-redux";

export default () => { 
   
	// useSelector: 从redux中获取state数据
    const state = useSelector(state => state)
     // useDispatch：从redux中获取dispatch方法
    const dispatch = useDispatch()

    console.log(state);
    console.log(dispatch);
    return (
        <>
            <h1>使用Hook方式使用React</h1>
            <h3>{ 
   state.reducer.num}</h3>
            <button onClick={ 
   () => dispatch({ 
   type:'add',payload:1})}>自增+1</button>
            <button onClick={ 
   () => dispatch({ 
   type:'add',payload:2})}>自增+2</button>
            <button onClick={ 
   () => dispatch({ 
   type:'add',payload:-1})}>自增-1</button>
        </>
    )
}

深复制库

我们在之前的jsx中使用的深复制是JSON.parse(JSON.stringify( ))
这个虽然能实现store中state的深复制，但是其效率不高。因此，我们可以使用immer包进行深复制。

npm i immer -S

immer使用方法

对之前的jsx配置进行修改

import { 
   
    createStore,
    combineReducers
} from 'redux'

import produce from 'immer'; 

// 初始化可共享的状态数据

const initState = { 
   
    msg: 'hello Redux',
    num:1
}
/** * reducer一个函数 接受的参数为一个当前状态值（state）和一个对当前状值进行修改的对象方法（action） * reducer函数的格式为 (state,action) => newState *注意：action =(type , payload,...) 其中前两项必须是这么写 redux规定了只能这么定义，使用其他变量就会报错 */

function reducer(state = initState, action) { 
   
    const { 
   
        type,
        payload
    } = action
    
    return produce(state,(newState)=>{ 
    
        switch (type) { 
   
            case 'add':
                newState.num +=payload
                break;
             //.....
        }
    })
}

const reducers = combineReducers({ 
   
    reducer
})

const store = createStore(reducers)
export default store

装饰器语法

由于装饰器语法还未被W3C支持，因此我们需要安装babel插件用于解析装饰器

npm i @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties -D

再在babel配置中引用插件

 { 
   
      "plugins": [
      ["@babel/plugin-proposal-decorators", { 
    "legacy": true }],
      ["@babel/plugin-proposal-class-properties"]
    ]
  }

对上述知识简单梳理

npm i redux -S
npm i react-redux -S
npm i immer -S

• 第一步,构建store的逻辑

const store = createStore(
  combineReducers({ 
   good,user,...}),
  compose(//对中间件进行合并处理
    applyMiddleware(ReduxThunk),
    applyMiddleware(ReduxLogger),
    ...
  )
)

//引入immer 进行深复制
import produce from 'immer'
function reducer(state=initState, action) { 
   
  return produce(state, newState=>{ 
   
    switch(action.type) { 
   
      case '':
    }
  })
}
export default reducer

• 第二步,连接redux和react

//导入一些依赖文件
......
function App() { 
   
  return (
    <Provider store={ 
   store}>
    { 
   /* 在这里引入需要使用redux的组件*/}
    .....
    </Provider>
  )
}

• 第三步,在react组件中使用store
  • 如果是类组件, 只能使用 connect() 高阶组件.

@connect(
  state=>({ 
   msg:state.user.msg, ....}),
  dispatch=>({ 
   changeMsg:(payload)=>dispatch({ 
   type,payload})})
)
class Home extends PureComponent { 
    }
export default Home

class Home extends PureComponent { 
    }
export default connect(
  state=>({ 
   msg:state.user.msg, ....}),
  dispatch=>({ 
   changeMsg:(payload)=>dispatch({ 
   type,payload})})
)(Home)

• 如果是函数式组件, 使用 connect() 高阶组件

export default connect(
  state=>({ 
   msg:state.user.msg, ....}),
  dispatch=>({ 
   changeMsg:(payload)=>dispatch({ 
   type,payload})})
)(props=>(<div></div>))

• 如果是函数式组件(react v16.8),还可以使用react-redux的hooks写法

export default () => { 
   
  const msg = useSelector(state=>state.user.msg)
  const dispatch = useDispatch()
}

今天的文章react中redux的流程_react setstate「建议收藏」分享到此就结束了，感谢您的阅读。