flux——redux

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

可人不是断气的时候才真的死了。

有人说人会死三次，

第一次是他断气的时候 ，从生物学上他死了；

第二次是他下葬的时候，人们来参加他的葬礼，怀念他的一生，然后在社会上他死了，不再会有他的位置；

第三次是最后一个记得他的人把他忘记的时候，那时候他才真正的死了。

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

flux是一种架构思想，专门解决软件的结构问题，让组件之间通信更方便，一共有15中实现模式

facebook flux是对于flux的一种实现，

redux是基于flux模型的一种实现，

他们都不是为react量身定做的，

react-redux是为react量身定做的

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

reudx工作流程（也是flux流程的思想）：

在组件（component）中，我们通过一个按钮点击或者ajax请求回来东西等，我们要发送一个action，这个action中包含了这个action的类型和真正要发布的数据，一起发送到store中，但是store无法直接处理，需要交给reducer来进行状态的修改，reducer修改状态有一个原则——就是纯函数，reducer不会直接修改老状态，它是接收老状态之后进行二次加工，然后返回一个新的状态，这个过程并不涉及老状态的修改，reducer返回新状态之后，store就会自动的通知在这里面订阅的组件，订阅的组件就会收到这个更新的状态，然后就会自动的更新要修改的值

------------------------------获取状态subscribe---------------------------

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

    constructor(props) {
      super(props);
    
      this.state = {
          title:store.getState().titlereducer
      };
    }
    componentWillMount(){

        //订阅消息
        
        store.subscribe(()=>{
            console.log("状态修改了",store.getState())
            this.setState({
                title:store.getState().titlereducer
            })
        })
        
    }

    render(){
        return <div>
            Navbar--{this.state.title}
        </div>
    }
}

export default Navbar;

---------------------------发送状态dispatch---------------------------------

import React ,{Component} from "react";
import axios from "axios";

import store from "../../store"; //引入store
class Detail extends Component{
    constructor(props) {
      super(props);
    
      this.state = {
          filminfo:null
      };
    }

    render(){
        return <div>
            {
                this.state.filminfo?
                <div>
                    <img src={this.state.filminfo.cover.origin}/>
                    <h2>{this.state.filminfo.name}</h2>
                </div>
                :null
            }
        </div>
    }

    componentWillMount(){
        //获取路由参数
        console.log(this.props.match.params.kerwinid);

        axios.get(`/v4/api/film/${this.props.match.params.kerwinid}?__t=1540450246836`).then(res=>{
            this.setState({
                filminfo:res.data.data.film
            })

            //dispatch action 到 store 中
            store.dispatch({
                type:"changetitle",
                payload:res.data.data.film.name
            })
        })
    }
}

export default Detail;

--------------------------store/reducer----------------------------------

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

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

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

const store = createStore(reducer);


export default store;

-----------------------------------------listreducer-------------------------------

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;

------------------------------------------titlereducer--------------------------------

//reducer (纯函数) 
    var titlereducer = (prevState="卖座电影1",action={})=>{
        console.log("reducer--",action);
        //prevstate 得到的老状态，
        //action {type:"changetitle",payload:"铁血战士"}
        var type=action.type;

        switch(type){
            case "changetitle":
                return action.payload
            default:
                return prevState
        }
        return prevState;
        // store.title=action.pa
    }
    //store 卖座电影=>铁血战士=maizuo =>=>
    export default titlereducer;

 

 

--------------------------redux异步处理-----------------------------------

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

import { createStore,combineReducers } from 'redux';
import titlereducer from "./reducers/titlereducer.js";
import listreducer from "./reducers/listreducer.js";

import {applyMiddleware,compose} from 'redux';
import reduxthunk from "redux-thunk";

const reducer = combineReducers({
    titlereducer,
    listreducer
})

const store = createStore(reducer,applyMiddleware(reduxthunk));



export default store;

-----------------------------home中-----------------------------

import React,{Component} from "react";
import axios from "axios";
import "./index.scss";
import {connect} from "react-redux";
import store from "../../Store"

class App extends Component {
    constructor(props){
        super(props)
        this.state={
            list:[]
        }
    }

    render(){
        return <div id="Home">
            {
                this.state.list.map(item=>
                    <img src={item.cover.origin} alt="" onClick={this.handleClick.bind(this,item.id)} key={item.id}/>
                )
            }
        </div>
    }

    componentDidMount(){

        if (store.getState().listreducer.length===0) {
            console.log('aaa+++++++++++++++++++++')
            axios.get("/v4/api/film/coming-soon?__t=1540512121692&page=1&count=3").then((res)=>{
                // console.log(res.data.data.films)
                this.setState({
                    list:res.data.data.films
                })
                store.dispatch({
                    type:"changelist",
                    payload:res.data.data.films
                })
            })
        }else {

                
                // console.log(store.getState().listreducer)
                this.setState({
                    list:store.getState().listreducer
                })

                console.log("bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb")
                 
        
        }








        store.dispatch({
                type:"changetitle",
                payload:"卖座电影"
        })


        // if (this.props.list.length===0){
        //     this.props.getHomeListThunk();
        // };
    }


    componentWillUnmount(){
          this.setState = (state,callback)=>{
          return;
        };
        }

    handleClick(id){
        this.props.history.push(`/detail/${id}`)
    }
}

// export default connect(
//         (state)=>{return {list:state.listreducer}},
//         {
//             getHomeListThunk(){
//                 return (dispatch)=>{
//                     axios.get("/v4/api/film/coming-soon?__t=1540512121692&page=1&count=3").then(res=>{
//                         dispatch({
//                             type:"changelist",
//                             payload:res.data.data.films
//                         })
//                     })
//                 }
//             }
//         }

//     )(App);


export default App;