react-redux 数据流动

https://segmentfault.com/a/1190000010951171


从登录过程看数据流动


因为登录界面是在父组件中，暂且将父组件起名为Parent，所以我们需要将store（即所有状态交由Provider）给Parent处理


container.js


<Provider store={store}>
    <Parent >
        <登录界面>
                <button onClick={this.props.login(username(从文本框获取值),password)}>登录</button>
        </登录界面>
    </Parent >
</Provider>


export connnect(mapStateToProps,mapDispatchToProps)(Parent)  需要将状态和dispatch从store映射到父组件Parent


let  mapDispatchToProps = (dispatch)  =>{  login:bindActionCreator{get_login,dispatch} }


reducer.js


let initialState={ }


const actionTypes={
    USER_LOGIN:"USER_LOGIN"
}


export const actions = {
    get_login: function (username, password) {
        return {
            type: actionsTypes.USER_LOGIN,
            username,  //payload  携带reducer执行操作时所需数据，reducer通过action来调用
            password   //payload  携带reducer执行操作时所需数据，reducer通过action来调用
        }
    }
}


export function reducer(state = initialState, action) {
    
}
一般来说dispatch（action后），actionscreator中的payload将交给reducer处理，但是在这里我们需要同后台进行交互，需要一些异步处理，所以引用中间件react-saga


saga.js


在这里我们需要同后台进行交互，需要一些异步处理


export function* loginFlow() {
    while (true) {
        let request = yield take(IndexActionTypes.USER_LOGIN);   take从上面的actioncreator中获取payload
        let response = yield call(login, request.username, request.password);   call(回调函数，arguments)
        if(response&&response.code === 0){    ！！！此处的response与上面的不同，此处的response是后台的响应数据
            yield put({type:IndexActionTypes.SET_MESSAGE,msgContent:'登录成功!',msgType:1});
            yield put({type:IndexActionTypes.RESPONSE_USER_INFO,data:response.data})     //put相当于dispatch（action）,将从后台获取的数据返回给reducer,同时执行
                                                                                                                                               reducer,所以中间件就是将actioncreator中的payload加工后返给reducer,加
                                                                                                                                               工后的数据依旧用action来调用
        }
    }
}


export function* login(username, password) {
    yield put({type: IndexActionTypes.FETCH_START});    
    try {
        return yield call(post, '/user/login', {username, password})  
    } catch (error) {
        yield put({type:IndexActionTypes.SET_MESSAGE,msgContent:'用户名或密码错误',msgType:0});
    } finally {
        yield put({type: IndexActionTypes.FETCH_END});
    }
}


configureStore.js


const  Store=createStore(redurer,loginFlow)  将react-saga与reducer绑定，同时创建Store状态库