Ignite

React和Redux数据流向

2018-03-10

简单描述一下action 、reducer、store 三者的关系:

使用 action 来描述“发生了什么”,和使用 reducers 来根据 action 更新 state 的用法。
store 就是把它们联系到一起的对象
用 this.props.dispath (在页面.jsx文件中)去找一个action(在 Action.jsx ) ,然后在这个
action中包含请求的请求方式:

  • 查询请求action
1
2
export const getSelectDdata = (data) => ActionCreator(API_INIT_POST_MODEL,
'/api/rcslmodelcascade/propertylist${queryData(data)}','GET')()
  • 修改请求action
1
export const editPersional = (data) => ActionCreator(API_UPDATE_PERSONAL_LIMIT, '/api/rcslmodelprivate', 'PUT', data)();
  • 删除请求action
1
export const detelePersionalLimit = (data) => ActionCreator(API_DELETE_PERSIONAL_MODEL, '/api/rcslmodelprivate/${data}', 'DELETE')();
  • 添加请求action
1
export const addPersionalLimit = (data) => ActionCreator(API_POST_PERSIONAL_MODEL, '/api/rcslmodelprivate', 'POST', data)();

这时,我们还需要添加一个action Type,来表示用户完成任务的动作。于是在
ActionType.jsx中就有好多形如:export const API_INIT_POST_MODEL = ['REQUEST', 'POST_MODEL_SUCCESS', 'FAILURE'];

然后到reducer , reducer 就是一个纯函数,接收旧的 state 和 action,返回新的 state。在reducer里,你可以
用switch定义数据的形式,用来和后台对接。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
case API_INIT_POST_MODEL[1]:
return {
...state,
selectData:
_.map(actions.data, (v, k) => {
return {
value: v.value.map((v, k) => {
return {
labelName: v.name,
optionVal: v.value.map(data => {
return {value: data.code, name: data.name}
}),
key: v.code,
type: 'select'
}
}),
name: v.name,
code: v.code,
}
}),

}
  • 然后返回新的state给store,在store.jsx文件中,
    根据已有的 reducer 来创建 store 是非常容易的。我们使用combineReducers() 将多个 reducer 合并成为一个。并通过中间件applyMiddleware 创建store。
1
const finalCreateStore=composeWithDevTools(applyMiddleware(promiseMiddleware))(createStore)

Redux store 保存了根 reducer 返回的完整 state 树。然后返回给

1
2
3
4
5
6
7
ReactDom.render(
<Provider store={store}>
<Router history={history} >
{routes}
</Router>
</Provider>
),document.getElementById('content')

根节点,然后重新渲染数据

Tags: React
使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏

扫描二维码,分享此文章