React05

Redux

 1、概念：

         redux是一个专门为react.js应用程序开发的状态管理模式

 2、网址：

         https://www.redux.org.cn/

 3、特点：

         集中式存储管理应用的所有组件状态

 4、核心概念：

        --state：state表示所有的状态数据

        --Store：存储数据的地方

        --action：为一个对象，表示一个动作对state进行怎样的操作，type属性是必须的，表示的是action的名称，其他的属性可以自由设置，由组件store.dispath("action名"，参数)触发

        --reducer：store收到action后，必须计算出新的state值，这个过程计算reducer

        --dispath：store操作行为触发方法，store.dispath("action名"，参数)

        --subscribe：表示数据的监听，store.subscribe方法设置监听函数，当state数据改变时，就会执行这个函数

        --getState()：store.getState()可以获取state状态数据

 5、下载：

        npm i redux @4.1.1

 6、语法：

     redux创建

          1、创建一个store文件夹

          2、解构一个createStore，表示创建一个Redux store存放应用中所有的state。

              import {createStore} from "redux"

          3、定义状态数据state

            const 自定义state名 ={

              定义状态值

            }

          4、定义reducer，定义action动作对state状态数据做相应的操作

            const 自定义 = (state = 自定义state名，action){

                //定义action对象

                switch(action,type){

                  case "action名":

                  return{

                    操作state值

                  }

                  default:

                      return state

                  }

            }

          6、当应用中有多个reducer时，可以使用redux中的combineReducers，可以将多个reducer集中在一起

            const reducer = combineReducers({

                    reducerCounter,

                    reducerCart

                })

          5、将reducer暴露出去

          export const store = createStore(reducer)

      redux使用：

          1、引入store

            import { store } from '../store'

          2、触发action方法

            store.dispatch({ type: 'action方法名' })

          3、在挂载钩子函数中监听数据，当redux中的数据改变时实时更改页面的数据

              componentDidMount() {

                //启动监听，监听state状态数据变化

                this.unsub = store.subscribe(() => {

                  //state状态数据变化执行

                  this.setState({ 需改变的state状态值: store.getState().reducer名.定义的state状态值 })

                })

              }

          4、当数据改变完成后，将监听销毁

           componentWillUnmount() {

                this.unsub() //销毁监听

              }

 7、封装

      1、封装actiontype：

          export const ADD_CART = "ADD_CART"

      2、封装action：

          1、引入actiontype

            import { ADD_CART } from "../actionType";

          2、定义action动作将其暴露

            export funtion createActionCart(product){

              return{

                type:'action名',

                product   //传值

              }

         }

      3、封装reduce：

          1、引入actiontype

            import { ADD_CART } from "../actionType";

          2、定义state状态数据

            const 自定义state名 ={

              定义状态值

            }

          3、定义reducer，定义action动作对state状态数据做相应的操作，并暴露

 8、集成中间件

        npm i redux-thunk@2.4.1

 9、小知识点

        1、css局部有效

          --css文件名为：xx.module.css

          --使用：

           import styles from "./index.module.scss"

           在根标签内使用styles.类名

            className={styles.container}

        2、scss

          下载：npm i node-sass sass sass-loader