Redux和React-Redux学习笔记

Redux 是一个通用的状态管理工具，并不局限于某一个框架，只是下雨天（项目中）巧克力（react）和音乐（redux）更配哦！

*Redux工作流程：发送一个action给reducer，然后reducer返回值给store

这个过程如同你去逛某宝，你想买双鞋，你就要在搜索框中输入你想买的东西的类型，然后你点搜索，这个动作就是action。这个action 得交给一个特定的部门来处理，也就是reducer，处理完之后就会把你想要的东西返回到“数据库”当中，也就是我们这里的store

Redux

首先，创建一个store仓库

	import { createStore } from "redux";
	import { reducer } from "./reducer";
	
	const store = createStore(reducer);
	
	export default store;

创建一个reducer

	const initValue = {
	    value: '默认值'
	}
	
	const reducer = (state = initValue, action) => {
	    switch (action.type) {
	        case 'send_type':
	            return Object.assign({}, state, action)
	        case 'login':
	            return Object.assign({}, state, action)
	        default:
	            return state
	    }
	}
	
	module.exports = {
	    reducer
	}

这是action

	const sendAction = () => {
	  return {
	    type: "send_type",
	    value: "我是action",
	  };
	};
	
	module.exports = {
	  sendAction,
	  loginInfo,
	};

在页面中用store.subscribe订阅store的变化

    componentDidMount() {
        this.unSubscribe=store.subscribe(() => {
            this.forceUpdate()
        })
    }

当然也需要取消订阅

    componentWillUnmount(){
        //在页面卸载时取消订阅，防止内存泄漏
        this.unSubscribe()
    }

在页面中我们可以通过store的getState方法获取到数据

	 <h3>{store.getState().value}</h3>

redux小结：
1、构建action，通过创建一个函数，然后返回一个对象，需要注意携带type属性
2、构建reducer，用来相应action，然后通过return把数据传回给store
3、利用createStore来构建store，构建的时候传递我们写好的reducer
4、利用store.subscribe()注册监听
5、当我们利用store.dispatch()发送一个action的时候就能出发我们的监听了，在里面       利用store.getState()就能拿到值

React-Redux

React-Redux相较于Redux，有两个比较重要的概念：

1、Provider：这个组件能够使你整个APP都能获取到store中的数据

2、connect：这个方法能够使组件和store进行关联，如果我们需要接受Provider提供                       的store就需要把我们组件通过connect进行加强

下面我们用代码进行详细讲解：

首先引入Provider和我们的store，将Provider套在App组件的最外层并将store传进去

    <Provider store={store}>
      <Router>
        <Switch>
          <Route path='/home' component={Home} />
          <Route path='/reduxDemo' component={ReduxDemo} />
        </Switch>
      </Router>
    </Provider>

• connect方法后面有两个括号，第一个括号有四个参数，通常只有前面两个参数比较常用，第二个括号里面放我们需要加强的组件

	const mapDispatchToProps = (dispatch) => {
	  return {
	    sendAction: () => {
	      dispatch({
	        type: "add_action",
	      });
	    },
	  };
	};
	
	const mapStateToProps = (state) => {
	  return {
	    state,
	  };
	};
	export default connect(mapStateToProps, mapDispatchToProps)(ReactRedux);

combineReducers 合并多个reducer

import { createStore, combineReducers } from "redux";
import { userReducer } from "./userReducer";
import { loginReducer } from "./loginReducer";

const reducer =  combineReducers({
  userReducer,
  loginReducer,
})

export default createStore(reducer);

react-redux工作流程思路导图：