前言

网上别人的文档都是 直接 就是上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

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)
)

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

React-Native项目中使用Redux的更多相关文章

  1. 组装者模式在React Native项目中的一个实战案例

    前言 在实际的开发中,如果遇到多个组件有一些共性,我们可以提取一个BaseItem出来,然后在多个组件中进行复用,一种方式是通过继承的方式,而今天我们要说的是另一种方式--组装者模式. 什么是组装者模 ...

  2. 如何在非 React 项目中使用 Redux

    本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...

  3. React Native项目集成iOS原生模块

    今天学习一下怎么在React Native项目中集成iOS原生模块,道理和在iOS原生项目中集成React Native模块类似.他们的界面跳转靠的都是iOS原生的UINavigationContro ...

  4. 技术实践丨React Native 项目 Web 端同构

    摘要:尽管 React Native 已经进入开源的第 6 个年头,距离发布 1.0 版本依旧是遥遥无期."Learn once, write anywhere",完全不影响 Re ...

  5. 如何优雅地在React项目中使用Redux

    前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...

  6. 优雅的在React项目中使用Redux

    概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...

  7. 【腾讯Bugly干货分享】React Native项目实战总结

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...

  8. React Native 项目运行在 Web 浏览器上面

    React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力.相比之前的 Web app 来说,对于性能和用户体验提升了非常多. 但是 React Nati ...

  9. React Native 项目实战-Tamic

    layout: post title: React Native 项目实战 date: 2016-10-18 15:02:29 +0800 comments: true categories: Rea ...

  10. React Native 项目整合 CodePush 全然指南

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/y4x5M0nivSrJaY3X92c/article/details/81976844 作者 | 钱 ...

随机推荐

  1. Transformation functionality for the String class

    String类的转换功能: package com.itheima_05; /* * String类的转换功能: * char[] toCharArray():把字符串转换为字符数组 * String ...

  2. idea appliction context not configured for this file

    File --> Project Structure

  3. leading--Oracle hint

    SQL>  explain plan for select rowid rid from  2   scott.emp e where e.empno >100 and e.empno & ...

  4. LGWR和DBWn的触发条件

    Rolling Forward(前滚) Oracle启动实例并加载数据库,然后通过Online Redologs中的重做日志,重现实例崩溃前对数据库的修改操作.在恢复过程中对于已经提交的事务,但尚未写 ...

  5. 软工读书笔记 week 6 ——《疯狂的程序员》Part 1

    这本小说以主人公绝影上大学后初次接触编程开始讲起,这周主要看的就是绝影还在大学的那段经历,虽然故事背景很多年前,但很多地方仍然会引发我的共鸣. 第一个梦想 在“第一个梦想”一节讲了作业布置做一个通讯录 ...

  6. JVM知识(四):GC配置参数

    JVM配置参数分为三类参数:跟踪参数.堆分配参数.栈分配参数 这三类参数分别用于跟踪监控JVM状态,分配堆内存以及分配栈内存. 跟踪参数 跟踪参数用户跟踪监控JVM,往往被开发人员用于JVM调优以及故 ...

  7. [WSUS] Windows Server Update Service 更新后,出现错误不能连接

    执行以下命令:C:\Program Files\Update Services\Tools\wsusutil postinstall /servicing 参考:http://www.urtech.c ...

  8. mysql 8.0.11 安装(windows)

    mysql本地安装(windows) 一.安装包下载 从官网下载安装包,地址:https://dev.mysql.com/downloads/mysql/ 二.配置 解压到本地,然后在目录下新建my. ...

  9. mysql创建表的注意事项

    1 库名,表名,字段名必须使用小写字母,"_"分割. 2 库名,表名,字段名必须不超过12个字符. 3 库名,表名,字段名见名识意,建议使用名词而不是动词. 4 建议使用InnoD ...

  10. C++ 读书笔记2

    dfadsfa body { font-family: Helvetica, arial, sans-serif; font-size: 14px; line-height: 1.6; padding ...