React-Redux过程解析

React-Redux过程解析

1.react项目中，使用到redux的地方，也是跟vue中使用vuex一样，一般是用于管理 多个地方都可以对其改变，或者受其影响的state(状态)。
2.在redux的组成：
(1).stroe : 仓库存储管理state,只能有一个。
(2).state：状态值
(3).action: 状态请求触发的媒介，是一个对象，必须有type属性，用于匹配action的名称
(4).reducer:当store接收到一个，会根据action对象内的属性值，做相应的操作(对state)，并且最终会返回一个新的state,state变化之后就会触发页面的重新渲染。reducer是一个函数，第一个参数为state(默认自动传入),第二个参数为action(需要手动传入)。

3.状态更改需要通过store.dispatch(action)；方法将状态更改请求发送给reducer。并且这是唯一的方法，dispatch方法一执行，就会自动触发reducer方法自执行。

4.具体流程:
用户(view)操作----触发store的dispatch方法，将状态更改请求发送至，reducer，-----reducer进行相应的操作-----返回一个新的state-----视图重新渲染

5.store怎么获取reducer函数？
只需要创建store时，传入reducer函数即可。如下代码

import  {createStore}  from 'redux';    //引入创建store的方法
import  reducer   from  '你reducer文件所在的目录';     //引入编写的reducer函数

const  Store=createStroe(reducer);     //创建store对象

完成

6.项目中所有子组件需要使用store内的状态值，还需要使用‘react-redux’ 中的Provider 组件，将store对象传入所有的子组件props中。

import   {Provider}  from  'react-redux'  ;

ReactDOM.render(
	<Provider   store={Store} >
	...
	</Provider>,
	document.getElementById('app')
);

这样项目中所有子组件都能使用store了。
注意上述所有操作均在index.js(入口文件中)。