redux及其基本操作

一、对redux的理解：

• 是一个状态管理工具，是一个独立的产品，跟react和vue都没关系，且可以跟任意框架进行结合
• 主要用途：数据共享
• 只要在redux共享的数据，任意组件都可以获取的到

安装：npm i redux

二、核心概念

（一）创建store

常用方法:
getState()获取数据
dispatch()修改数据
subscribe()监听数据

(二)用到reducer（状态初始化与更新逻辑）

（用于修改数据的方式，需要用户自己编写）

• 一个用于指定初始state和state的修改方式的纯函数，接收state与action参数，必须返回一个新的state

（三）获取数据用到state： 状态（共享数据）

• 状态的改变，会触发使用了这个状态的组件更新

（四）修改数据用到action：动作/命令

• 格式：{type：‘ xx ’ }，xx为指定修改state的方式
• 调用方式’store.dispatch（action）’
  流程：调用dispatch，把action传入store内部，store内部自动调用reducer纯函数（因为创建store的时候就已经把reducer传入store了），传入action参数，在reducer函数内部，根据action.type进行不同的操作

 例子：
 const reducer = function(state,action){
                // 根据action.type进行不同的操作
                switch(action.type){
                    case 'login':
                        return 
                }
            }

三、使用步骤

(一) 创建store（数据存储仓库）

（存放共享的数据）

import {createStore} from 'redux'
const store=createstore(reducer); 
export default store

(二) 定义reducer（纯函数）

（定义state初始值并指定修改state的方式）

const initState={   //初始化的数据
        currentUser:{}
}
const reducer=function(state=initstate,action){   //state=initstate指定默认值，初始化数据
//reducer内不能修改state，只能返回一个新的state
return state;
}

• 在reducer中需要做两件事

1、初始化数据
2、指定数据的修改方式

(三) 操作redux

1、获取数据state

（只要共享到redux的数据，在任何组件都可以通过store.getstate（）获取）

• 获取：store.getstate（）

2、修改数据state

• 修改：store.dispatch（action），格式：{type：‘ ’ }

redux文件配置--修改例子：
const reducer=function（state=initState，action）{
//传入state和action，且必须返回一个新的State
    //action:{type:'login'，user}
  switch(action. type){
  //登录退出写法：
          case ' login':
                return{
                    isLogin: true,
                    currentUser: action. user
                } 
           case ' logout': 
                return initState;
  //update user写法：如果只是更新原来数据的一小部分
           case ' update_user':
                return {
                         ... state,  //先把原来的初始数据复制下来
                          currentUser:{    //让只更改了一小部分的原始数据替换原始数据
                                  ... state. currentUser,
                                  ... action. user
                          } 
                 }
   //如果都没有对应要进行的修改，直接返回原来的数据
       default:
               return state;
}

对return {
                         ... state, 
                          currentUser:{
                                  ... state. currentUser,
                                  ... action. user
                          } 
                 } 的解惑
例子：
const user={ username:"laoxie", password:123, role:' admin', phone:13188888888}

const newUser1={... user}
newUser1={ username:"Laoxie", password:123, role:"admin", phone:13188888888}

const newUser2={.… user, phone:13612345678}
 newUser2={ username:"laoxie", password:123, role:"admin", phole:13612345678}

• 监听：store.subscribe（fn）
  （传进去一个函数，只要state有变化，函数就会执行）
  （主要用于更新组件）

四、Redux设计和使用的三项基本原则

• 唯一数据源：store是必须是唯一的
• 只有store能改变自己的内容：store.dispatch（）
• Reducer必须是一个纯函数

五、redux中间件

redux中的action仅支持原始对象（plain object），处理有副作用的action，需要使用中间件。中间件可以在发出action，到reducer函数接受action之间，执行具有副作用的操作

（一）redux-saga

1、生成器函数Generator

• 定义函数时添加星号：*
  作用：用来生成迭代器
  在生成器函数中除了能使用return,还可以使用yield

2、迭代器Iterator

• 内部包含多个值的对象，要获取迭代器中的值，必须调用next（）方法，每调用一次next就是一次迭代，next方法的返回值格式：{value，done}
• value:每一次迭代返回的值
  done：标识迭代器是否迭代完成
• 例子

function*create（）{
console.log（'start'）
yield 10；
console.1og（1）
yield 50；//暂停并返回
console.log（2）
return 100；//结束并返回
console.1og（3）
}

• *for…of能遍历具有迭代器的数据

是因为不断执行迭代器的next（）方法，直到迭代完成

3、使用步骤

（1）引入saga

• npm i redux-saga -D
• import createSagaMiddleware from ‘redux-saga’;

（2）创建saga中间件

• const sagaMiddleware = createSagaMiddleware();

（3）将 sagaMiddleware 连接至 Store

• let enhancer = applyMiddleware(sagaMiddleware)
  const store = createStore(reducer,enhancer);

（4）引入并运行自定义Saga配置（自己编写）

• sagaMiddleware.run(rootSaga);