redux实战

1：action跟reducers是在组建中通过装饰器连接起来的；在这个之前二者没有任何联系；

第一部分：action——session.js

import * as Types from '../action-types'
import { toReg } from '../../api/home'


let actions={
    regiserFun(){
        // redux-thunk
        return function (dispatch,getState) {
            //redux-promise的用法：可以将payload中的promise执行，执行后将内容放到action.payload中进行派发:{ type:SET_SLIDERS, patload:[{},{},{},{}] }
            dispatch({type:Types.SET_SLIDERS ,payload:toReg().then(function (response) {
                    // 转换为 JSON
                    // console.log("response")
                    // console.log(response)
                    if(response.status===200){
                        return response.json();
                    }else{
                        alert('服务器挂掉了')
                    }
                }).then(function (j) {
                    // console.log('获取到的数据是====');
                    // console.log(j);
                    return j
                })})
        }
    }

}
export default  actions

第二部分：redux

1：根部的index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
//配置路由组件
import {HashRouter as Router,Route, Switch} from 'react-router-dom'
import Home from './containers/Home/Home'
import Profile from './containers/Profile/Profile'
import Lesson from './containers/Lesson/Lesson'
import Detail from './containers/Detail/Detail'
import Register from './containers/Register/Register'
import Login from './containers/Login/Login'

import {Provider} from 'react-redux'
import store from './store/index'

import './common/reset.css'

ReactDOM.render(
    <Provider store={store}>
        <Router>
            <App>
                <Switch>
                    <Route path='/' exact={true} component={Home}></Route>
                    <Route path='/lesson' component={Lesson}></Route>
                    <Route path={'/profile'} component={Profile}></Route>
                    <Route path={'/detail/:lessonid'} component={Detail}></Route>
                    <Route path={'/register'} component={Register}></Route>
                    <Route path={'/login'} component={Login}></Route>
                </Switch>
            </App>
        </Router>
    </Provider>
    , document.getElementById('root'));
registerServiceWorker();

2：store———-index.js

import { createStore , applyMiddleware } from 'redux'
import reduxLogger from 'redux-logger'
import reduxThunk from 'redux-thunk'
import reduxPromise from 'redux-promise'
import reducer from './reducers/index'


let store= createStore(reducer,applyMiddleware(reduxLogger,reduxThunk,reduxPromise))
window._store=store; //为了测试用
export default store

3：reducers——index.js

import { combineReducers } from 'redux'
import home from './home'
import session from './session'
export default  combineReducers({
    home,
    session
})

4：reducers——session.js

//一个页面一个reducer
import * as Types from '../action-types'
let initState={
    user:null,
    msg:'',
    success:'',
    err:0,

}
function session(state=initState, action) {
    switch (action.type){
        case Types.SET_USER_INFO:
            return {
                ...state,
                initState:action.payload
            }

        default:{
            return state
        }


    }
}
export default session

第三部分：action+redux在组建中融合

import React, {Component} from 'react'
import {connect} from 'react-redux'
import actions from '../../store/actions/session'
//加上装饰器以后才会有redux中的状态值；否则没有
@connect(state => ({...state.session}), actions)
export default class Register extends Component {
    componentWillMount(){
        console.log('this.props')
        console.log(this.props)
    }


    render() {
        return (
            <div>
                999
            </div>
        )
    }
}