react-redux-异步

##############################################

或许是不知梦的缘故，流离之人追逐幻影。

##############################################

 

-----------------------------------store-------------------------------------------

import {createStore,combineReducers} from "redux" ;//创建store

import titlereducer from "./reducers/titleReducer";
import listreducer from "./reducers/listReducer";

import {applyMiddleware,compose } from "redux";

import reduxchunk from "redux-thunk";//npm install --save redux-thunk
import reduxpromise from "redux-promise";//npm install --save redux-promise

// state [] =>[1,2,3,4,5,6]=>[1,2,3,6.8..9]
var reducer = combineReducers({
    titlereducer,
    listreducer
})


 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
    applyMiddleware(reduxchunk,reduxpromise)
  ));

export default store;

-------------------------------listreduce-----------------------------------

var listreducer = (prevState=[],action={})=>{
    //prevstate 得到的老状态，
    //action {type:"changelist",payload:[1,2,3,4,5,6]}
    var type=action.type;

    switch(type){
        case "changelist":
            return [...prevState,...action.payload]
        default:
            return prevState
    }
    return prevState;
    // store.title=action.pa
}


export default listreducer;

------------------------------------异步发送过程------------------------------

因为上面有异步处理过程，并且能访问到store（Provider），所以好使

import React ,{Component} from "react";
import axios from "axios";
import {connect} from "react-redux";
class Comingsoon extends Component{
    render(){
        return <div id="comingsoon">
            <ul>
                        {
                            this.props.list.map(item=>
                                <li key={item.id} >

                                    <img src={item.poster.origin}/>
                                    <h3>{item.name}</h3>
                                </li>
                            )
                        }
            </ul>
        </div>
    }

    componentDidMount(){

        if(this.props.list.length==0){
            //让容器组件 负责ajax请求， 然后 ，存数据到store
            this.props.getComingsoonListPromise();//访问容器组件传来的属性方法
        }
    }
}

export default connect(

    (state)=>{
        return {
            list:state.kerwinlist
        }//通过 this.props.list 就能访问到 store 中的listreducer
    },

    {
        getComingsoonListThunk(){
            return (dispatch)=>{
                axios.get("/v4/api/film/coming-soon?__t=1540773165205&page=1&count=7").then(res=>{
                    console.log(res.data);
                    //手动dispatch
                    dispatch({
                        type:"changelist",
                        payload:res.data.data.films
                    })
                })
            }

        }, //this.props.getComingsoonList,

        getComingsoonListPromise(){
            return axios.get("/v4/api/film/coming-soon?__t=1540773165205&page=1&count=7").then(res=>{
                    console.log(res.data);
                    //手动dispatch
                    return {
                        type:"changelist",
                        payload:res.data.data.films
                    }
            })

        } //this.props.getComingsoonList
    }

)(Comingsoon);

--------------------------------------接受信号，改变状态-------------------------

跟同步一样

import React ,{Component} from "react";
// import store from "../../store";
import {connect} from "react-redux";//
class Navbar extends Component{

    constructor(props) {
      super(props);
    }
    componentWillMount(){

        //订阅消息
        
        // store.subscribe(()=>{
        //     console.log("状态修改了",store.getState())
        //     this.setState({
        //         title:store.getState().title
        //     })
        // })  这个是redux中的操作，需要设置状态this.state
        
    }

    render(){
        return <div>
            Navbar--{this.props.title2}
        </div>
    }
}

export default connect(
    (state)=>{
        return {
            title2:state.title
        }
    }, // mapStatetoProps 将store中的状态映射成属性
    null
    )(Navbar);