Redux和react-redux用法

看到很多小伙伴一见到redux就头疼，笔者今天就来说说这个redux吧。

redux及其中间件介绍，参考：https://blog.csdn.net/lilygg/article/details/118256153

一、redux是什么？

redux是一个专门做状态管理的js库（不是react插件库），它可以用在react，angular、vue等项目中，但基本与react配合使用。

所以说react不是一个完整的框架。而我们所熟知的vuex就很不一样，它只能用在vue里，是vue自己的状态管理工具库，所以vue是一个完整的框架。

作用：集中式管理react应用中多个组件共享状态

二、什么情况下使用redux

某个组件的状态，需要让其他组件可以随时拿到（共享）

一个组件需要改变另一个组件的状态（通信）

总体原则：能不用就不用，如果不用比较吃力才考虑使用

Redux三大原则（action，reducer，store）：单一数据源、State是只读的、使用纯函数来执行修改。

Redux用法真没啥复杂的，简单的说吧，

Redux是一个js库，通过里边的createStore(reducer)可以生成一个store，把它导出来就可以在组件里边使用。组件需要更改数据，只需要store.dispatch({action:xx,payload:nnn})派发这样一个动作即可。

这个动作一旦被派发，就会触发reducer函数。reducer是个无副作用的纯函数。它接收两个参数：数据初始值（旧的state）和action对象，返回新的state。

在reducer纯函数里会根据action.type去做不同的数据更改操作，最终返回一个最新的状态，而不是直接更改原始数据。、

以上就是redux的基本工作流程。

在组件更改了数据之后，想要做到实时同步（实时更新数据），需要开发者手动调用store.subscribe(()=>{ //在需要拿redux数据的地方进行数据拿取操作})，实时监听store仓库中数据的变化。

想要拿到redux里的xxx数据，可以通过store.getState().xxx拿到数据xxx。

好了，光说不练假把式，大家也是看得云里雾里，废话不多说，talk is cheap,show me your code.

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 页面演示 -->
  <button id="increment">+</button>
  <span id="count">0</span>
  <button id="decrement">-</button>
  <!-- 直接把redux包拔下来引入 -->
  <script src="./redux.min.js"></script>
  <script>
    var initialState = {
      count:1
    }
    function reducer(state=initialState,action){//action是构建redux时定义好的操作
      switch (action.type) {
        case 'incrementAction':
          return {...state,count:state.count+1}
        case 'decrementAction':
          return {...state,count:state.count-1}
        default:
          return state;
      }
      return state;
    }
    //创建状态
    var store = Redux.createStore(reducer);
    //获取redux状态中的值
    console.log(store.getState());//{count:1}
    //添加点击事件
    document.getElementById('increment').addEventListener('click',(res) => {
      store.dispatch({type:'incrementAction'})
    });
    document.getElementById('decrement').addEventListener('click',(res) => {
      store.dispatch({type:'decrementAction'})
    });
    //监听redux状态值的变化
    store.subscribe(() => {
      //把状态中的值注入到dom中
      document.getElementById('count').innerText=store.getState().count;
    })
  </script>
</body>
</html>

上面的是简单版redux用法。

createStore(reducer)是基础用法，createStore函数其实可以有俩参数，下面我们看一下通常在项目中的写法：

import {legacy_createStore as createStore,combineReducers,compose, applyMiddleware} from "redux";
import thunk from "redux-thunk";

const initState = {
    a:1
};
function reducer(state = initState,action){
    const {type,payload} = action;
    switch(type){
        case "INIT_DATA":
            return state+payload;
        default:
            return state;
    }
}
const devtool = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
const store = createStore(
    combineReducers({reducer}),
    compose(applyMiddleware(thunk),devtool)
);
export default store;

注意：在最新版的redux里，createStore函数已经被legacy_createStore替代。

react-redux是react提供的一个redux辅助js库，能让我们更简单地使用redux。

redux是redux本包！
react-redux是负责链接React和Redux的调料包！

前面我们说过，要想达到数据实时变化，需要开发者手动调用suscribe(()=>{})。react-redux则是在此基础上简化了redux用法，不再需要用户手动suscribe(()=>{})监听数据以达到实时变化。

react-redux提供了主要提供了Provider组件传值和connect高阶函数串联我们的组件。connect函数创建的是容器组件，UI组件不直接操作state。

需要传值的组件外部可以直接套个Provider，把store传递过去。就像下面这样：

// src/index.js
// 使用Provider组件注入store
import { Provider } from 'react-redux'
import store from './store'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
)

导出的组件如果想要包装一下啊，你就调用connect函数。

// HelloWorld.js
import React from 'react'
// 引入connect函数创建容器组件，ui组件不直接操作state
import { connect } from 'react-redux'

const HelloWorld = props => {
  return (
    <div>
      <div>HelloWorld，{props.value}</div>
      <button onClick={() => props.add(1)}>按钮</button>
    </div>
  )
}

// 设置给UI组件展示的参数
const mapDispatchToProps = store => {
  return {
    value: store,
  }
}

// 设置给UI组件调用的方法
const MapDispatchToPropsNonObject = {
  add: payload => ({ type: 'add', payload }),
}

export default connect(
  mapDispatchToProps,
  MapDispatchToPropsNonObject
)(HelloWorld)

以上就是redux和react-redux的基本用法。
好了，代码在于运动，生命在于呼吸。编程使我快乐，欢迎留言和互相交流，欢迎互粉！

本文参考：https://www.jianshu.com/p/cbe5347a61bc

posted @ 2022-10-17 18:00 龙波帝国阅读(103) 评论(0) 收藏举报

刷新页面返回顶部

龙波帝国~码农世界

代码改变世界，世界改变码农，码农改变代码！欢迎来到龙波帝国！

Redux和react-redux用法

公告

龙波帝国~码农世界

代码改变世界，世界改变码农，码农改变代码！ 欢迎来到龙波帝国！

Redux和react-redux用法

公告

代码改变世界，世界改变码农，码农改变代码！欢迎来到龙波帝国！