11-06-react redux

最新推荐文章于 2022-10-24 18:09:51 发布

ange997

最新推荐文章于 2022-10-24 18:09:51 发布

阅读量95

点赞数

分类专栏： 11-react

本文链接：https://blog.csdn.net/ange997/article/details/109446834

版权

11-react 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

redux重点

store 仓库

核心是store，store中放state

let store = Redux.createStore(
    reducer,
    composeEnhancers()   // 启动redux调试
);

创建store时，只能指定一个reducer
项目中如果有多个reducer，可以合并成一个reducer。

import { combineReducers } from "redux"
import counter from "./counter";
// combineReducers就是用来合并reducer
let reducer = combineReducers({
    counter
    // ......
})
export default reducer;

引入reducers文件夹，合并文件夹里的多个reducer，默认调用index文件夹
import reducer from "./reducers";

state 状态数据

state是只读的，你只能获取状态，不能直接去修改状态。

let initState = {
    number:0
}

action 活动动作

action表示要执行的一个动作，本质就是一个JS对象，这个对象必须有一个属性，叫type，
type是用来描述修改的动作。

let increment = {
    type:"INCREMENT"
}

action creators 活动创造者
action creators是一个函数, 返回一个action，此函数的作用是用来创建action。
这样创建的action就可以传参了。

function increment(step) {
    return{ type:"INCREMNT",step:step }
}

reducer

reducer是一个函数，根据不同的action，完成state的修改，也就说，想修改状态，要准备action和reducer。

 // state=initState 告诉reducer初始化的状态是initState
 function reducer(state=initState,action){
     switch (action.type) {
         case "INCREMENT":
             return { number:state.number+1}
         case "DECREMENT":
             return { number:state.number-1}
         default:
             return state; // 如果action不能识别，还是返回老的状态
     }
 }

相当于一个管理员，传给它初识状态state和动作action，会根据条件返回新的状态，形式是一样的。

dispatch 发布

用于派发一个action

			  //action活动
store.dispatch(increment);

getState

console.log("最新的状态:",store.getState());

获取状态（只能是从仓库中获取状态）

subscribe 订阅

一旦订阅了当仓库中的状态发生了改变，就会执行回调函数，你可以在回调函数里面做一些事情。

store.subscribe(()=>{ // 回调函数   当仓库中的状态发生改变就会执行回调函数
    // 获取最新的状态
    console.log("最新的状态是：", store.getState());
})

redux

react

问：react是什么？
    答：用于构建用户界面的JS框架。

问：react本身有状态管理吗？
	答：有  react本身就有状态管理

问：不使用redux，可以进行项目开发吗？
	答：可以

问：vue和react本身就有状态管理，为什么会有redux和vuex？
	答：状态集中管理
既然我们要把状态交给redux进行管理，是不是就意味着，react组件中就没有状态了？
	答：对的
问：如何让视图（界面）更新？
	答：调用render();

学习react，就是学习react技术栈：
react.js + react-router-dom + axios + webpack + es6 + ui + redux

redux类似于vuex，对状态统一进行管理，如果项目非常小，不需要使用redux。

redux介绍：

进行react中组件的状态管理，状态共享。
追综到状态的变化
redux并不是只能要react中使用，可以配合很多的JS框架，是一个独立的状态管理器。 vuex只能在vue中使用。
redux和vuex一样，核心是store
发布订阅

基本概念：

核心是store，store中放state。单一数据源，状态只能来来自于store。
state是只读的，你只能获取状态，不能直接去修改状态。

store / state / reducer / action
订阅subscribe / 发布dispatch / getState

redux流程

学习redux，把握到仓库的，需要考虑两个东西：

如何创建store ( store / state / reducer / action)
如何使用store (3个api)

创建仓库：

<script src="../js/redux.js"></script>  页面中就有了Redux这个对象。
在Redux这个对象上，有一个api，叫createStore，它就可以创建一个仓库。

需要给仓库分配一个叫reducer的管理员
let store = Redux.createStore(reducer)

action:

 action表示要执行的一个动作，本质就是一个JS对象，
 这个对象必须有一个属性，叫type，
 type是用来描述修改的动作

准备reducer:

   reducer是一个函数，根据不同的action，完成state的修改
    也就说，你想修改状态，你要准备action和reducer。

reducer接收一个之前的状态和action，返回一个新的状态。

function reducer(state=initState,action){
    switch (action.type) {
        case "INCREMENT":
            return { number:state.number+1}
        case "DECREMENT":
            return { number:state.number-1}
        default:
            return state; // 如果action不能识别，还是返回老的状态
    }
}

使用store中的API

dispatch: 用于派发一个action
getState: 获取状态（只能是从仓库中获取状态）
subscribe: 订阅一旦订阅了当仓库中的状态发生了改变，就会执行回调函数，你可以在回调函数里面做一些事情。

初识redux代码解析

// 准备一个最开始的状态
    let initState = {
        number:0
    }

    // 准备action
    let increment = {
        type:"INCREMENT"
    }
    let decrement = {
        type:"DECREMENT"
    }

    // state=initState 告诉reducer初始化的状态是initState
    function reducer(state=initState,action){
        switch (action.type) {
            case "INCREMENT":
                return { number:state.number+1}
            case "DECREMENT":
                return { number:state.number-1}
            default:
                return state; // 如果action不能识别，还是返回老的状态
        }
    }

    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
    let store = Redux.createStore(
        reducer,
        composeEnhancers()   // 启动redux调试
    );

    // 先订阅
    store.subscribe(()=>{ // 回调函数   当仓库中的状态发生改变就会执行回调函数
        // 获取最新的状态
        console.log("最新的状态是：", store.getState());
    })

    // 如何仓库中的状态发生改变？你需要派发一个action
    store.dispatch(increment);
    // store.dispatch(increment);
    // store.dispatch(increment);

分析store.dispatch(increment)执行流程：

第一次当执行store.dispatch(increment)，它会调用reducer，我们会给reducer传递两上参数，
   一个是state，它是老的状态，一个是action，action中必定有一个叫type属性，type属性值是
   “INCREMENT”，它就执行到：return { number:state.number+1}  state是之前的老的状态，
   就会在老的状态的基础上加1，return {number:1}

第二次store.dispatch(increment);时，
    同样会调用reducer，会给reducer传递两个参数，一个是state，此时state是上一次修改完状态后的
    state，不是initState， 也就是{number:1}  ====>  {nubmer:2}

第三次store.dispatch(increment);时：
    对于reducer来说，老状态就是{nubmer:2} ......

redux-devtools插件

要调试状态的变化，需要安装一个插件，叫redux-devtools

安装插件还需要配置

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
let store = Redux.createStore(
    reducer,
    composeEnhancers()   // 启动redux调试
);

reducer是一个纯函数：

reducer是一个纯函数：
什么是纯函数：同样的输入，得到同样的输出。老状态和新状态需要保持数据结构一样。

几点：

任何时候，只要是同样的输入，必须得到同样的输出，无论是今天，昨天，明天，后天，结果要一样。
任何环境下，只要是同样的输入，必定得到同样的输出，无论是浏览器，node，原生app等。

在reducer中不能出现如下代码：

和时间有关的api data对象
不能操作dom 不能fs操作
不能调用系统api
不能发送http请求
不能使用Math.random等不纯方法

action creators

action是一个JS对象，描述一个操作状态的动作，里面必定有一个属性叫type。

action creators:
action creators是一个函数, 返回一个action，此函数的作用是用来创建action。

let initState = {number:0}

// action
/*let increment = { type:"INCREMNT" }
let decrement = { type:"DECREMNT" }*/

// action creator  作用：创建action   increment()
// action中除了type属性外，还可以有其它参数，通常可以传递一个东西payload
function increment(step) {
    return{ type:"INCREMNT",step:step }
}
function decrement(step) {
    return{ type:"DECREMNT",step:step }
}

function reducer(state=initState,action){
    switch (action.type) {
        case "INCREMNT":
            return {number: state.number+action.step}
        case "DECREMNT":
            return {number: state.number-action.step}
        default:
            return state;
    }
}
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
let store = Redux.createStore(reducer,composeEnhancers())   // 启动redux调试
// console.log(store)

// 订阅
store.subscribe(()=>{
    console.log("现在的状态是：", store.getState())
})

// 发布
store.dispatch(increment(10))
store.dispatch(decrement(5))

state状态初始化

1）可以在创建reducer时，指定初始状态：
    function reducer(state=initState,action){
2）还可以在创建store时，指定初始化状态：
    let store = Redux.createStore(reducer,initState,composeEnhancers())

let initState = { number:0 }
function reducer(state,action){
   switch (action.type) {
       case "INCREMENT":
           return {number: state.number+action.step}
       case "DECREMENT":
           return {number: state.number-action.step}
       default:
           return state;
   }
}
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
let store = Redux.createStore(reducer,initState,composeEnhancers())

// action creator 作用是用来创建action
// 有人把action creator也叫action
function increment(step){
   // 此时action除了type属性，还有一个step属性，这个step属性叫payload
   return { type:"INCREMENT",step }
}
function decrement(step){
   // 此时action除了type属性，还有一个step属性，这个step属性叫payload
   return { type:"DECREMENT",step }
}

// 订阅
store.subscribe(()=>{
   console.log(store.getState())
})
// 发布
store.dispatch(increment(100))