Redux

一.redux是什么?

状态管理器

二.redux工作流程主要包含哪些层次，每个层次的作用是什么？

三.redux的三大基本原则是什么？

1)单一数据源
2)State是只读的
3)使用纯函数来执行修改

四.什么情况下需要使用redux

1)总体原则:大型项目状态管理复杂才用
2)某个组件的状态，需要共享
3)某个状态需要在任何地方都可以拿到
4)一个组件需要改变全局状态
5)一个组件需要改变另一个组件的状态

五.redux的三个核心概念

1.action

1)标识要执行行为的对象
2)包含2个方面的属性
    a.type:标识属性,值为字符串,唯一,必要属性
    b.xxx:数据属性,值类型任意,可选属性
3)例子:
             const action={
                       type:'INCREMENT',
                       data:2
                    }
4)Action  Creator(创建Action的工厂函数)
   const  increment=(number)=>({type:'INCREMENT',data:number})

2.reducer

1)根据老的state和action,产生新的state的纯函数
2)样例
          exportdefaultfunctioncounter(state=0,action){
             switch(action.type){
                 case'INCREMENT':
                      returnstate+action.data
                 case'DECREMENT':
                    return  state-action.data
                 default:
                       return state
                    }
                 }
 3)注意
       a.返回一个新的状态
       b.不要修改原来的状态

3.store

1)将state,action与reducer联系在一起的对象
2)如何得到此对象?

import{createStore}from'redux'
importreducerfrom'./reducers'
conststore=createStore(reducer)

3)此对象的功能?

getState():得到state
dispatch(action):分发action,触发reducer调用,产生新的state
subscribe(listener):注册监听,当产生了新的state时,自动调用

有组件—>想要显示数据—>数据应该在仓库中存着（有且只有一个仓库）–有一个状态树（一棵树）–>

状态数据由reducer进行提供，reducer会有很多，所以会产生combimeReducer–>

状态想要传递到组件，state是没办法传递的，只有props能进行属性传递，所以只能将state转成props才能打通仓库与组件之间的关系–>真正实现props属性到组件之间的数据关联，需要利用connect进行操作–>connect是将组件与仓库建立起联系，所以会产生一个叫容器组件

对组件中的内容可能会进行操作，那么操作是由什么完成？动作！动作就是函数！–>动作是在仓库中—>事件上在reducer中—>仓库想要操作动作，分两种模式，一种是同步一种异步—>想要将动作（函数）传递到组件，需要将它们进行属性化转化操作，也就是mapDispatchToProps–>真正实现props属性到组件之间的数据关联，需要利用connect进行操作–>connect是将组件与仓库建立起联系，所以会产生一个叫容器组件

最终需要利用一个提供者，将仓库内容进行整体提供，提出Provider和store的概念，进行整个包裹。

import React, { useState, useRef, useEffect, useCallback } from "react";
import { StyleSheet, Image, Text, View, Button } from "react-native";
import { createStore } from "redux";
import { connect, Provider } from "react-redux";
/*
1.需要有一个视图组件以便显示相应的数据
2.可以创建一个store仓库，用以给组件提供数据支持
3.store仓库本身是没有数据的，所以需要有reducer给它设置数据，需要与store进行结合
4.reducer的state是无法实现数据传递的，因为它是状态，但是，它又需要与组件进行沟通，
所以需要将state转成props才能进行属性传递
5.reducer的state转props是通过mapStateToProps实现的
6.props属性与组件之间还没有建立起联系，所以需要利用connect进行关联
7.需要有一个Provider提供者，提供store仓库给所有的组件，所以容器组件的外部需要有Provider进行包裹
8.视图层中有一个按钮，而这个按钮想要触发一个事件
9.事件就是动作，动作就函数，可以定义一个mapDispatchToProps，因为事件是无法进行传递的，
唯一能够传递的内容只有属性props，而且需要注意的是事件一定会有多个，mapDispatchToProps应该是什么？是对象！
10.mapDispatchToProps也需要利用connect与组件建立起关联
11.视图组件中就可以调用该方法，但是mapDispatchToProps只做派发操作，不做具体动作执行
12.具体的操作执行交由reducer完成（reducer是数据的处理中心，数据的初始化，修改都在reducer中完成）
*/
// 3,12
const reducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case "INCREASE":
      return {
        count: state.count + 1,
      };
    default:
      return state;
  }
};

//分模块时
// 3,12
const reducer = (state = { count: 0, count1: 0 }, action) => {
  switch (action.type) {
    case "INCREASE":
      // return {
      //   count: state.count + 1, // state是只读的，只能通过纯函数进行修改
      // };

      // return Object.assign({}, state, { count: state.count + 1 });
      return { ...state, count: state.count + 1 };
    case "DECREASE":
      // return {
      //   count1: state.count1 - 1,
      // };

      // return Object.assign({}, state, { count1: state.count1 - 1 });
      return { ...state, count1: state.count1 - 1 };

    default:
      return state;
  }
};

// 2,4
const store = createStore(reducer);

// 5
const mapStateToPrpos = (state) => {
  return {
    count: state.count,
  };
};

const Count = (props) => {
  const { count, increase } = props;

  return (
    <View>
      <Text>Count:{count}</Text>
      <Button title="count++" onPress={increase}></Button>
    </View>
  );
};
// 9
const mapDispatchToProps = {
  increase() {
    return {
      type: "INCREASE",
    };
  },
};

// 6
const CountContainer = connect(mapStateToPrpos, mapDispatchToProps)(Count); // HOC

// 7
const App = () => {
  return (
    <Provider store={store}>
      <CountContainer />
    </Provider>
  );
};

export default App;