React学习打卡Day09

1.Redux 发布订阅者模式实现状态管理

function createShownStore(reducer){
    var list = []
    var state = reducer()
    function subscribe(callback){
        list.push(callback)
    }
    function dispatch(action){
        state = reducer(state,action)
        list.forEach(callback=>{
            callback && callback()
        })
    }
    function getState(){
        return state
    }
    return {
        subscribe,
        dispatch,
        getState
    }
}
export default store

/*var obj = {
    myname:'shown'
}
function test(obj){
    var newobj = {...obj}
    newobj.myname = 'peter'
    return newobj
}
test(obj)
纯函数：
    1.对外界没有副作用
    2.同样的输入得到同样的输出
*/

2.异步redux管理

​
    useEffect(()=>{
        if(store.getState().CinemaListReducer.list.length===0){
            //去后台取数据
            //actionCreator 里写异步
            store.dispatch(getCinemaListAction())
        }else{
        }
        //订阅
        var unsubscribe = store.subscribe(()=>{
            setList(store.getState().CinemaListReducer.list)
        })
        return ()=>{
            //取消订阅
            unsubscribe()
        }
    },[])

​

在dispatch函数内传入函数则执行异步调用机制，redux-thunk原理
在useEffect函数返回的回调函数内，执行unsubscribe方法取消订阅，unsubscribe是subscribe方法的返回值

import axios from "axios"
function getCinemaListAction(){
    return (dispatch)=>{
        axios({
            url:,
            method:,
            headers:
             dispatch({
                type:'change-list',
                payload:res.data.data.cinemas
            })})}
}
export default getCinemaListAction