TOC
其实在网上随便一搜索 react 加 redux 的可以说特别的多，但是为 React-native 加的还真的很少，所以我在实践完成之后就打算记录一下在 RN 中如何启用 redux，其实和 React 的用法差别还真是不小。
step 1 安装依赖
主要的依赖有三个
最后的那个 logger 其实是一个打印的模块，不然 debug 起来要配置一些东西，挺麻烦的。用了这个就能在控制台进行 debug。
npm i react-redux redux redux-logger –save
首先找个你喜欢的地方创建一个 redux 文件夹
ps: 不要使用 cnpm 命令
step 2 开启 actions
actions 实质上的主要功能就是提供一个统一的对象交由给 reducer 进行统一处理。
创建一个actions文件夹，内部建立一个actions.js文件
import * as types from './types'
const openBook = book => ({ type: types.OPEN_BOOK, book })
export { openBook }
至于这个 types 文件我想就不需要我贴出来了吧，要注意的是你的 actions 函数应该接受一些新的状态，随后返回一个对象,它必须拥有 type 属性。
step 3 建立 reducer
reducer 本身的角色有点像是核心处理者，他通过接收的 actios 对象的 type 来断定需要用何种方式处理
在redux 目录下建立一个 reducers 文件夹，并建立一个 reducer.js 文件
import { combineReducers } from 'redux'
import { openBook } from '../actions/actions'
import * as types from '../actions/types'
// 原始默认state
const initState = {
//某些初始化的东西
book: {},
books: []
}
// 按照type调用不同的处理函数，返回一个新的state并更新
function dadaBook(state = initState, action) {
switch (action.type) {
case types.OPEN_BOOK:
return openBook(state, action)
default:
return state
}
}
// 实质上的处理函数，返回一个全新的state对象
function openBook(state, action) {
return Object.assigin({}, state, { book: action.book })
}
export default combineReducers({
dadaBook
})
在这里我推荐相应的处理函数都导出到另外一个单独的文件，有助于阅读。
step 4 建立 store
在你的redux 文件夹下建立一个 store文件夹 ，内部创建一个 store 文件。
import { createStore, applyMiddleware, compose } from 'redux'
import createLogger from 'redux-logger'
import rootReducer from '../reducers/reducers'
const configureStore = preloadedState => {
return createStore(rootReducer, preloadedState, compose(applyMiddleware(createLogger)))
}
const store = configureStore()
export default store
redux 的基本结构我们已经建立完成，接下来就需要在组件系统中使用它了。
step 5 使用
首先让我们在 app.js 中全局导入这个 store
import { Provider } from 'react-redux'
import store from './redux/store/store'
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
<RootStack />
</Provider>
)
}
}
最后我们需要在需要使用这个 redux 的组件中这样做。
import { connect } from 'react-redux'
import { openBook } from '../../redux/actions/actions'
// 导入actions函数
class aComponent extends Component {
// ...
componentDidMount() {
console.log(this.props.book)
}
_changeBook(book) {
this.dispath(openBook(book))
}
}
const mapStateToProps = state => ({
book: state.dadaBook.currentBook
})
// 把组件的状态与store对应起来
// ps:中间不要忘了加上reducer函数的名字，他将会返回给你最新的state对象
export default connect(mapStateToProps)(aComponent)
到这里你的 redux 应该已经可以正常运作了，并在更新 store 的时候还可以在控制台中显示前后差异