复习 redux 总结

redux 三大核心

  redux是一个js容器，用于全局的状态管理
 1.单一数据源
  整个应用的 state 存储在 一颗object tree 中，并且这个object tree 只存在于唯一一个store中。
 2.state是只读的
 唯一能改变state的方法就是触发action，action是一个用于描述已发生事情的普通对象
 这样就确保了试图和网络请求都不能直接去修改state
  调用方式  store.dispatch({type:"ADD",index:1})
 3.使用纯函数来执行修改
 为了表述action如何改变state tree，需要去编写reducers 
 reducers只是一些纯函数，他就收先前的state和action，并且返回新的state。
 可以服用，可以控制顺序，传入附加参数

 reducer本质就是一个函数，他用来响应发送过来的action，然后经过处理，把state发送给store，函数会接受两个参数，
 一个参数是初始化state，第二个参数是action。

 store 就是把action于reducer联系到一起
 主要职责     
			1.维持应用的state 
            2.提供getState()方法
            3.提供dispatch()方法
            4.通过subscribe（）来注册监听
            5.通过subscribe()返回值来注册监听

实际操作 准备工作 步骤

一. 构建项目

	 构建react项目  create react '项目名称'
     删除src下的多余文件
     在src目录下创建pages目录并且创建Home组件。
     编写一个简单的结构样式。
     在App.js中引入这个组件。
     安装redux  yarn add redux/npm install redux --save

二. 构建Action

 在src目录下创建一个文件夹action
 在该目录下创建一个index.js,用来构建Action
 在action创建函数里面利用 return，返回一个action对象,注意需要携带type属性
 把这个action创建的函数导出。

// 这是一个action函数
const sendAction =()=>{
    return {
        type:'sendType',
        value:'这是一个action',

    }
}
module.exports = {sendAction};

三.构建reducer

在根目录下创建一个文件夹 reducer
在该目录下创建一个index.js 文件，用来构建reducer,注意reducer需要接收两个参数。
第一个参数是state,我们可以定一个初始化的state，然后进行赋值
在函数里面判断第二个参数 action的type值是否是我们发送的
如果是的话，我们可以通过return 返回新的state
把reducer进行导入

/* 定义initState 默认值 */

const initState = {
    value:'默认值'
}
const reducer = (state=initState,action)=>{
    console.log('触发reducer',state,action)
    switch (action.type) {
        case 'sendType':
            return Object.assign({},state,action)     
        default:
           return state;
    }
}

module.exports = {reducer};

四.构建store

在根目录下创建一个文件夹store。
在该目录下创建一个index.js文件，用来构建store,注意createStore函数里面第一个参数接收的是reducer 
我们需要导入刚刚创建的reducer，然后设置到函数里面去
createStore的返回值就是我们构建好的store，然后进行导出

import {createStore} from "redux";
import {reducer} from "../reducer";

// 创建store  录入自己创建的reducer 
const store = createStore(reducer);

export default store;

五.在页面中使用

给页面的button按钮来一个点击事件
在组件一加载完毕的时候我们通过store来进行监听器的 注册，返回值可以用来注销监听。
再点击时间处理函数中，通过store.dispatch 来发送一个action 

import React from "react";
import store from "../../store";
import { sendAction } from "../../action";

 export default class Home extends React.Component{
     handleClick = ()=>{
        const action = sendAction();
        store.dispatch(action);
     }
     componentDidMount(){
        store.subscribe(()=>{
            this.setState({})
            console.log('subscribe',store.getState());
        })
     }
    render(){
        return  <div>
             <h1> hello,word</h1>
             <p> {store.getState().value} </p>
             <button onClick={this.handleClick} >点击</button>
         </div>
     }
 }

项目目录.