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(入口文件中)。