Redux

redux

什么是状态？

不同时刻的表现形式，状态管理我可以进行状态的改变，并且记录不同时刻的状态（历史记录），状态管理的主要特点就是（状态，改变状态，如何异步操作，如何获取状态，模块划分）

vuex的概念（规则）

• state 状态
• mutations 同步的形式改变状态
• actions 异步的形式获取数据，并且可以显示的通过commit提交mutation
• getters 可以对state数据进行过滤，类似计算属性
• modules 可以对多模块进行划分

redux的原则

• 单一的数据源 （整个应用只存在一个store）
• state是只读，不能改变
• 使用纯函数修改state，但是不是修改是返回一个新的state

redux的规则

• 创建一个store， createStore(reducer)
• 创建reducer，reducer就是一个函数（谁便一个函数），接收两个参数state，action，reducer用来维护state（接收旧的state，通过action.type判断生成新的state，返回新的state）
• action用来描述一个动作
• store.dispatch(action) 用来发送一个动作描述（派发）
• store.getState()获取整个仓库的state状态树
• store.subscribe(() => {}) 用来监听state的变更，返回一个函数可以用来卸载监听

connect实现原理

在原应用组件上包裹一层，使原来整个应用成为Provider的子组件
接收Redux的store作为props，通过context对象传递给子孙组件上的connect

• redux 是一个单独的,脱离了react也可以使用
• 下载redux
• 引入import 或者require

let redux = require("redux")

• 创建一个仓库 createStore(是一个对象,里面有dispatch,getState,subscibe)

const store = createStore(reducer,{初始值})

• createStore接收三个参数
  。reduce为function,当dispatch一个action时，此时函数接收action更新state;
  。preloadState为初始化State,字符串,数组，对象都可以
  。enhancer为function,用来增强的store,Redux定义有applyMiddleware来增强store。
• reduce

import {createStore} from 'redux'

// 创建一个reducer
const reducer = (state, action) => {
  switch (action.type) {
    case 'add':
      return {};
    case 'remove':
      return {}
    default :
      return state
  }
}

// 创建store
const store = createStore(reducer)

// 监听
const unSubscribe = store.subscribe(() => {
  console.log(store.getState())
})

setTimeout(() => {
  unSubscribe() // 卸载
}, 10000)

store.dispatch({type: 'add', item: {}})
store.dispatch({type: 'add', item: {}})
store.dispatch({type: 'add', item: {}})
store.dispatch({type: 'remove', index: 0})

// 和react关联
import {Provider, connect} from 'react-redux'

• 仓库下有四个函数参数
  。dispatch 参数必须是一个对象，必须有type属性，传递的参数被action接收
  。getState 获取的是reducer的返回结果
  。subscribe:监听
  。replaceReducer：替换

• store 仓库，单项数据流
  。state 每次计算出来上一次的状态，由getState获取
  。action 描述数据如何改变
  。reducer 接受上一次的状态和action计算出来的真正的新数据

• redux Web 应用是一个状态机，视图与状态是一一对应的.所有的状态，保存在一个对象里面
  。redux-logger 日志Reselect 记忆组件
  。redux-thunk 为了解决异步action的问题
  。redux-saga 为了解决异步action的问题
  。react-router-redux 保持路由与应用状态(state)同步

异步加载合并之后的代码

• index.js

import React, { Component } from 'react'
import{createStore,combineReducers,applyMiddleware} from "redux"
import exam from "./exam/examreducer"
import logger from "redux-logger"
import thunk from "redux-thunk"
const reducer=combineReducers({  //合并
    exam
})
const store=createStore(reducer,applyMiddleware(logger,thunk))
window.store=store;
export default store;

• reducer.js
  。他合并的exam就是reducer里面的常量名
  。在这里返回let newState=JSON.parse(JSON.stringify(state))，然后直接返回新的newState。

 import {INIT_DATA} from "./reducer.types.js"
 const exam=(state={
      list:[]
  },action)=>{
   switch (action.type) {
    case INIT_DATA:
    state.list=action.list
      return {
          ...state,
          list:[...state.list]  //返回到组件中
      };
    default :
      return state
  }
 }
 

• reducer.action.js

import axios from 'axios'
import {INIT_DATA} from './exam.type'
export const createAction = (next) => {
    axios.get('/api/list').then((res) => {
        console.log(res.data);
        next({ type: INIT_DATA, list: res.data })
    })
}

• reducer.type.js

export const INIT_DATA='INIT_DATA';

• 在这里store里面的具体步骤已经完成,只要在组件中用react-redux中的conncet把组件和store仓库连接起来就
• 其次从action里面请求的数据是在componentDidMount()里面的请求的
  *所有的调用是this.props.initdata(),其他的操作可以再在里面加上参数

import { connect } from "react-redux";
import { INIT_DATA} from "../store/exam/exam.type"
import {createAction} from "../store/exam/exam.action"
class Exam extends Component {
export default connect((state) => {
    return {
        list: state.exam.list, 
    }
}, (dispatch) => { //dispatch是store仓库的方法
    return {
        initdata() {
            dispatch(createAction)
        },
        getid(参数){
           dispatch({type:变量名,参数})
        {
    }
})(Exam)