其实在网上随便一搜索 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 的时候还可以在控制台中显示前后差异