react-native基础：redux学习2-实战篇

发表于   |   分类于   |  

导航

react-native基础：redux学习1-理论篇

react-native基础：redux学习2-实战篇

本篇blog是在对redux理论知识有了足够了解后，做的实战架构。

实战

安装需要用到的库

1
2
3
4
5
npm install --save redux
npm install --save react-redux
npm install --save redux-devtools
npm install --save redux-thunk
npm install --save redux-logger

react绑定库跟开发者工具
redux
react-redux
redux-devtools

异步action构造器redux-thunk

日志工具
redux-logger

基础用法 同步的action

引入支持

1
2
import { createStore } from 'redux'
import { Provider, connect } from 'react-redux'

将根组件包装进<Provider>

1
2
3
4
5
6
7
8
9
10
11
//reducer函数，所有的
function reducer(state={},action){
}
let store = createStore(todoApp);

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

通过 react-redux 提供的 connect() 方法将包装好的组件连接到Redux。尽量只做一个顶层的组件，或者 route 处理

任何一个从 connect() 包装好的组件都可以得到一个 dispatch 方法作为组件的 props，以及得到全局 state 中所需的任何内容。 connect() 的唯一参数是 selector。

1
2
3
4
5
6
7
8
9
10
const PageContainer = connect()(PageContainer);

let store = createStore(todoApp);

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

高价用法 异步action

如何把action creator跟网络请求结合起来呢。

redux-thunk：一个搭建异步action的构造器。
其作用就是把一些比较复杂的动作(例如这里用到的异步操作)封装到一个action中去。

通过使用指定的 middleware，action creator 除了返回 action 对象外还可以返回函数。这时，这个 action creator 就成为了 thunk。

当 action creator 返回函数时，这个函数会被 Redux Thunk middleware 执行。这个函数并不需要保持纯净；它还可以带有副作用，包括执行异步 API 请求。这个函数还可以 dispatch action，就像 dispatch 前面定义的同步 action 一样。

注意dispatch定义：通过 store.dispatch() 将 action 传到 store

使用 ES6 计算属性语法，使用 Object.assign() 来简洁高效地更新 state的值

1
return Object.assign({}, state, newState);

注意事项

1
2
// 每次使用 `fetch` 前都这样调用一下
import fetch from 'isomorphic-fetch'