React-Native项目中使用Redux

前言

网上别人的文档都是 直接 就是上redux redux-thunk react-redux ,immutable这样的一套,这个有经验的看还行,新手看就很吃力了,需要了解一步一步的安装redux达到开发要求

我觉得这需要一个学习的过程,拔苗助长不是好事

这是我写项目的逐步搭建的过程,欢迎查看源代码github-pinduoduo

redux

1. 安装redux(后面再安装(react-redux)

因为redux是js的部分 所以不需要link

 npm install redux--save 

安装完成后确认可以正常启动

1. 创建store

我的项目结构

和react项目一样的项目结构

index.js

import { createstore } from 'redux'
import reducer from './reducer'

export default createstore(reducer) // 导入state

reducer.js

import actiontypes from './actiontypes'
const defaultstate = { // 初始化state
  data: 'my is redux!!!!' 
}

export default (state = defaultstate, action) => {
  console.log(action)
  if (action.type == actiontypes.change) { // 修改state
    const newstate = json.parse(json.stringify(state))
    newstate.data = 'change data!!!'
    return newstate
  }
  return state
}

actiontypes.js

export default {
  change: 'change' // 定义统一的type
}

actioncreators.js

import actiontypes from './actiontypes'
export function change() { // 统一管理action
  return {
    type:  actiontypes.change
  }
}

最后在页面里面

import react, { component } from 'react'
import {
  text,
  stylesheet,
  view,
  statusbar,
  dimensions,
  button
} from 'react-native'
import store from '../../../store/index' // 导入store
import { change } from '../../../store/actioncreators'  // 导入action
export default class popular extends component {
  constructor(props) {
    super(props)
    this.state = store.getstate() // 初始化state,获取redux里面数据
    store.subscribe(() => { // 订阅state的改变
      this.setstate(store.getstate())
    }) 
  }
  render() {
    return (
      <view>
        <text>{this.state.data}</text>
        <button
          title="更新state"
          onpress={() => {
            store.dispatch(change())
          }}
        />
        <button
          title="查看state"
          onpress={() => {
            console.log(store.getstate())
          }}
        />
      </view>
    )
  }
}

const styles = stylesheet.create({})

最基础的redux就使用成功了,但是这个还达不到我们的开发要求,下面将引入react-redux

redux + react-redux

如果不了解react-redux,请学习后再说,不然肯定看不懂,react-redux文档

react-redux文档

之前我们在组件里面使用redux直接去获取数据,加入每个页面都这样写,会很麻烦,所以我们要借助react-redux来帮我们处理store

修改之前写的页面代码,去掉之前页面使用state的地方

import react, { component } from 'react'
import {
  text,
  stylesheet,
  view,
  statusbar,
  dimensions,
  button
} from 'react-native'
import { change } from '../../../store/actioncreators'
class popular extends component {
  render() {
    return (
      <view>
        <text>{this.props.data}</text>
        <button title="更新state" onpress={() => {
            //..
          }} />
        <button
          title="获取state"
          onpress={() => {
            //..
          }}
        />
      </view>
    )
  }
}

const styles = stylesheet.create({})

export default popular

修改程序的挂载入口

index.js

/** @format */
import react, { component } from 'react'
import { provider } from 'react-redux'
import { appregistry } from 'react-native'
import store from './app/store'
import app from './app/routes/app'
import { name } from './app.json'

class apps extends component {
  render() {
    return (
       // 挂载store,让app内部所有组件都可以使用
      <provider store={store}>
        <app />
      </provider>
    )
  }
}

appregistry.registercomponent(name, () => apps)

这里我们就可以在组件里面通过connent来接收了

import react, { component } from 'react'
import { connect } from 'react-redux'
import {
  text,
  stylesheet,
  view,
  statusbar,
  button
} from 'react-native'
import { change } from '../../../store/actioncreators'
class popular extends component {
  render() {
    return (
      <view>
        <statusbar
          translucent={true} // 设置沉浸式状态栏 正常情况下 状态栏高度为20 这里的20 需要页面元素距离最上面 paddingtop:20
          backgroundcolor={'rgba(0,0,0,0.1)'} // 设置状态栏颜色
          animated={true} // 允许动画切换效果
        />
        <text>{this.props.data}</text>
        <button title="更新state" onpress={this.props.changedata} />
        <button
          title="获取state"
          onpress={() => {
            console.log(this.props.data)
          }}
        />
      </view>
    )
  }
}

const styles = stylesheet.create({})

const mapstate = state => ({
  data: state.data
})

const mapdispatch = dispatch => ({
  changedata() {
    dispatch(change())
  }
})

export default connect(
  mapstate,
  mapdispatch
)(popular)

这里我们react-redux再次获取并修改了redux里面的数据,相对之下,使用react-redux后,页面逻辑更加清楚

redux + react-redux+immutable

在日常开发里面很常见,让我们的数据更加严谨

很简单,首先安装

npm install immutable

处理我们store的数据

import actiontypes from './actiontypes'
import {fromjs} from 'immutable' 
const defaultstate = fromjs({ // 将对象转成immutable对象
  data: 'my is redux!!!!'
})

export default (state = defaultstate, action) => {
  if (action.type == actiontypes.change) {
    return state.set('data','change redux!!!')
  }
  return state
}

然后处理我们页面里面引用数据的地方

const mapstate = state => ({
  data: state.get('data') // immutable对象使用get获取
})

redux的分离

将大量的store数据放在一起是非常不好的行为,我们要将每个组件之间的store尽可能的分离

这里用的是redux给我们提供的 combinereducers 将store进行合并

修改页面目录结构,在页面目录里面创建store

组件内部的sore代码

popular/store/reducer

import actiontypes from './actiontypes'
import {fromjs} from 'immutable'
const defaultstate = fromjs({
  data: 'my is redux!!!!'
})

export default (state = defaultstate, action) => {
  if (action.type == actiontypes.change) {
    return state.set('data','change redux!!!')
  }
  return state
}

popular/store/actiontypes

export default {
  change: 'change'
}

popular/store/actioncreators

import actiontypes from './actiontypes'
export function change() {
  return {
    type:  actiontypes.change
  }
}

popular/store/index

import reducer from './reducer'
import actioncreators from './actioncreators'
import actiontypes from './actiontypes'

export { reducer, actioncreators, actiontypes }
// 使用入口

这样我们就在组件内部新建了一个store,接下来我们要把组件内部的store合并store里面

./store/reducer

import { combinereducers } from 'redux'
import { reducer as homepopular } from '../src/home/popular/store/index'

export default combinereducers ({
  homepopular: homepopular
})

这就完成了store的合并,这里store变了,自然访问就变了

popular.js

const mapstate = state => ({
  data: state.homepopular.get('data')
})

最后引入redux中间件

我一般情况下使用redux-thunk

npm install redux-thunk

import { createstore,applymiddleware } from 'redux'
import thunk from 'redux-thunk'
import reducer from './reducer'


export default createstore(
  reducer,
  applymiddleware(thunk)
)

这里不做样式了,会的人自然会,不会的学习一下,学会使用很简单