Redux基础知识

1.Redux:

      安装:cnpm i redux -S

    引入:import {createStore} from 'redux'

2.调用:

    创建:let store=createStore(counter)

    store:(只允许有一个)

      1.store.getState() --->获取state的值

      2.store.dispatch({type:type})--->传递参数给action

      3.store.subscribe(render) --->监听render,更改reducer里面数据之后刷新到页面

      4.store.replaceReducer()--->更换数据源

3.合并(combineReducers): 

    引入:import { combineReducers } from 'redux'

    导出:export default combineReducers ({ ...相应数据源 })

    使用:

      1.store.getState()不是单个值了,而是取出相应数据源对应的值  例子:sore.getState().counter

      2.store.dispatch()方法不受影响 ----》但是操作函数名最好不要同名--->重名的话都会执行一遍

4.store的唯一性

    1.store一旦不是唯一,就变成了各自不相通的数据了,各自为政

    2.store单拿出来,以便全局调用

      import {createStore} from 'redux'

      let store=createStore(counter)

      export default {store}

5.applyMiddleware 中间键       

    引入:import { creaapplyMiddleware } from 'redux'

    使用:let store=createStore(counter,creaapplyMiddleware(fun))

function fun({getState}){
  return function (dispatch){
    return function (action){
      console.log(action)
      dispatch(action)   //执行这个才能继续执行----不想执行,就去拦截
    }
  }
}

6. redux-thunk  可以强化dispatch 异步执行

    安装:npm i redux-thunk -S

    引用:import thunk  from 'redux-thunk'

    使用:thunk直接把dispatch变成异步   

 let store=createStore(counter,applyMiddleware(thunk,fun))
         store.dispatch(fun(dispatch){           //可以放入需要执行的函数           setTimeout(()=>{             dispatch({type:'aaa'})           },1000)          })

 

      

posted @ 2020-08-17 17:23  Judicious  阅读(97)  评论(0编辑  收藏  举报