Redux学习

转行前端 冲冲冲

Redux

1.web应用 的视图和状态一一对应
2. 所有状态保存在一个对象里面

基本概念和API

总概 Store State Action ActionCreator store.dispatch()
Store 保存所有数据的仓库，项目中唯一
State 仓库中具体的摸个数据 一个State对应一个view State相同 view相同
Action 通知 view的变化是由于state变化，而用户只能接触到view，所以需要用户改变视图view，view发送通知（Action）告诉store      state需要变化了，Action是一个对象 type属性是必须的，其他属性自由设置。
Action Creator 工厂函数 传入什么类型Action 发送什么通知
store.dispatch() 视图转发通知的唯一方式

Store

import {createStore} from 'redux'
const store=createStore(fn) store对象

Action

通知(vue里面是动作)
const action={
 type:'Action',//Action名称
 payload:'Learn Redux'//携带的数据
}

Action Creator

一个生成Action的函数
function actionCreator(ActionType,text){
return {
    type:ActionType,
    text //z这块是直接的text属性 还是类似于键值对 or 对象的属性和值简写
  }
}

store.dispatch()

view发出Action 唯一方法
import {createStore} from 'redux'
const store=createStore(fn)
store.dispatch({
  type:'dispatch',
  payload:'dispatch的内容'
})
结合Action Creator
store.dispatch(actionCreator('dispatch','dispatch的内容'))

Reducer

概念
Store收到Action必须返回一个新的State,这样view才会变化。State重新计算的过程叫做Reducer.
Reducer是一个函数 接收Action和当前state做参数 返回新的State

在实际使用中一般在create 在生成Store的时候 将reducer传入
store.dispatch会触发reducer的自动执行（类似监听？一有消息（变化）就执行）
import {createStore} from 'redux' 
const store=create(reducer)

store.subcribe

监听函数 一旦state发生变化，就自动执行这个函数
store.subscribe(listener) //把render或setState放入listen 可实现自动渲染
解除监听
let unsubscribe=store.subscribe(()=>console.log(store.getState()))
unsubscribe();

工作流程

用户点击页面->页面有数据发生改变->使用ActionCreators生成当前页面的action->dispatch action通知到store -> store自动调用reducers->返回一个新的state -> store设置监听state store.subscribe(listener) -> 可设置state一旦变化 页面重新渲染。 

工作流程listen的补充 使用新的state覆盖旧的state 
function listener(){
 let newState=store.getState() 
 component.setState(newState)
}

中间件和异步操作

异步操作的解决方案
如何让reducer在异步操作结束后自动执行？使用中间件(middleware)

中间件   ----   一个函数  对store.dispatch进行改造，在发出Action后和执行reducer前添加功能
在我看来是切面增强，在不改变action功能前提下将action进行后置增强。

import {applyMiddleware,createStore} from 'redux'
import createLogger from 'redux-logger'
const logger=createLogger();
const store=createStore(reducer,applyMiddleware(logger))

applyMiddlewares

applyMiddlewares 是redux原生方法，作用是将所有中间件组成数组 依次执行。（promise.then()类似）

React-Redux

项目基本使用的是dva 这块粗略的了解一下
将所有组件完全划分两大类 将视图和数据逻辑分离成两个不同的组件