3.redux

1.安装依赖

npm install --save redux
或
yarn add redux

store  保存数据的地方，将store看成一个容器，一个应用只能有一个store 
//新建两个文件src/index.js   reducer.js

2.src/store/index.js

//创建store
import {createStore} from 'redux'
const defaultState={
    msg:"这是关于redux"
}
const reducer=(state=defaultState,actions)=>{
    return state;
}
//createStore()里面只能接收函数
let store=createStore(reducer)
export default store;

//跨页面传参
import store from '../store/index'
componentDidMount(){
        console.log(store.getState())    //{msg: "这是关于redux"}
    }

3.分离

//store/index.js
    import {createStore} from 'redux'
    import reducer from './reducer'
    //createStore()里面只能接受函数
    let store=createStore(reducer)
    export default store;

//store/reducer.js
const defaultState={
    msg:"这是关于redux"
}
const reducer=(state=defaultState,action)=>{
    return state;
}
export default reducer;

4.向reudcer派发事件

home.js

this.state=store.getState()
 <button onClick={this.handleClick}>改变reducex</button>
 handleClick=()=>{
        const action={
            type:"btn_value",
            value:"redux很难用"
        }
        store.dispatch(action)     //使用dispatch向reducer派发行为
    }

reducer.js 接收

const defaultState={
    msg:"这是关于redux"
}
//reducer可以接收state，但是不能修改state
const reducer=(state=defaultState,action)=>{
    console.log(action)
   if(action.type==="btn_value"){     
       let newState={...state};        //使用拷贝，改变state的值
       newState.msg=action.value;
       return newState;
   }
}
export default reducer;

改变数据

store.subscribe(this.handleSotreChange)
 handleSotreChange=()=>{
        this.setState(store.getState())
    }

redux调试工具

谷歌应用商店安装redux插件，点击插件中Redux DevTools进入github找到代码，复制到store

let store=createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION__ &&
                      window.__REDUX_DEVTOOLS_EXTENSION__())