redux工作流(用点击事件改变state)

1、store

//store
//index.js
import {createStore} from 'redux'
import reducer drom './reducer'
let store = createStore(reducer);
export default store;
//reducer.js
const defaultState = {
  msg:"react很不好用"
}
const reducer = (state=defaultState,action) => {
  //reducer拿到数据之后，会和之前的数据对比
  console.log(action)
  if(action.type==="btn_value"){
     let newState = {...state};
    newState.msg = action.value;t
    return new State
  }
  return state;
}
export default reducer;

reducer就是对state重新计算的过程  reducer必须是函数
reducer不能直接修改数据

2、Home.js

//Home.js
constructor(props){
    super(props);
  this.state = store.getStore();
  store.dubscribe(this.handleStoreChange)
}
<button onClick={this.handleClick}>改变</button>
handleClick=()=>{
    const action = {
      type:"btn_value",
    value:"redux很难用"
  }
  store.dispatch(action)
}
handleStoreChange(){
    this.setState(store.getState())
}