React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架。而我学习React也有一段时间了,现在就开始用 React+Redux 进行实战!

React 实践项目 (一)
本次实践代码

部署好的网址

上回说到用React写了一个带Header的首页,我们这次实践就使用Redux进行状态管理

Rudex

应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。
惟一改变 state 的办法是触发 action,一个描述发生什么的对象。
为了描述 action 如何改变 state 树,你需要编写 reducers。

我们接下来开始开始进行登陆与注册的状态管理

首先在 src 目录下创建 redux 文件夹,目录如下

digag
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ └── favicon.ico
│ └── index.html
│ └── manifest.json
└── src
└── components
└── Index
└── Header.js
└── LoginDialog.js
└── RegisterDialog.js
└── containers
└── App
└── App.js
└── App.css
└── redux
└── action
└── users.js
└── reducer
└── auth.js
└── users.js
└── sagas
└── api.js
└── sagas.js
└── selectors.js.js
└── users.js
└── store
└── store.js
└── App.test.js
└── index.css
└── index.js
└── logo.svg
└── registerServiceWorker.js

代码可从此获取

记得在 package.json 中更新依赖

接下来我会开始解释关键代码

  • action
    action/users.js
/*
* action 类型
*/
export const REGISTER_USER = 'REGISTER_USER';
// 省略其他action 类型 /*
* action 创建函数
*/
export const registerAction = (newUser) => {
return{
type:REGISTER_USER,
data: newUser,
}
};
// 省略其他 action 创建函数
  • reducer
    reducer/users.js
//Immutable Data 就是一旦创建,就不能再被更改的数据。
//对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。
import Immutable from 'immutable';
//从 action 导入需要的 action 类型
import {REGISTER_USER, REGISTER_USER_SUCCESS, REGISTER_USER_FAILURE} from '../action/users'; // 初始化状态
const initialState = Immutable.fromJS({
newUser: null,
error: null,
saveSuccess: false,
}); // reducer 就是一个纯函数,接收旧的 state 和 action,返回新的 state。
export const users = (state = initialState, action = {}) => {
switch (action.type) { // 判断 action 类型
case REGISTER_USER:
return state.merge({ // 更新状态
'newUser': action.data,
'saveSuccess': false,
'error': null,
});
case REGISTER_USER_SUCCESS:
return state.set('saveSuccess', action.data);
case REGISTER_USER_FAILURE:
return state.set('error', action.data);
default:
return state
}
};
  • store
    store/store.js
import {createStore, combineReducers, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga'
import * as reducer from '../reducer/users'; import rootSaga from '../sagas/sagas'; const sagaMiddleware = createSagaMiddleware(); const store = createStore(
combineReducers(reducer),
applyMiddleware(sagaMiddleware)
); sagaMiddleware.run(rootSaga); export default store;

然后在入口文件使用 store

src/index.js

import {Provider} from 'react-redux';
import store from './redux/store/store';
// 省略其他 ReactDOM.render(
<Provider store={store}>
<App />
</Provider>, document.getElementById('root')
);

在 App.js 中获取 action 和 状态

import {registerAction, loginAction} from '../../redux/action/users';
import {connect} from "react-redux";
import {bindActionCreators} from "redux";
//省略其他 class App extends Component { render(){
return(
<div className="App">
//省略
</div>
)
} } export default connect(
(state) => {
// 获取状态 state.users 是指 reducer/users.js 文件中导出的 users
// 可以 `console.log(state);` 查看状态树
return { users: state.users }
},
(dispatch) => {
return {
// 创建action
registerActions: bindActionCreators(registerAction, dispatch),
loginActions: bindActionCreators(loginAction, dispatch),
}
})(App);
// 在App 组件的props里就有 this.props.users this.props.registerActions this.props.loginActions 了
// 需要注意的是这里this.props.users是Immutable 对象,取值需要用this.props.users.get('newUser')
// 也可在 reducer 里改用 js 普通对象

装饰器版本:
需要在Babel中开启装饰器
装饰器插件babel-plugin-transform-decorators-legacy

@connect(
(state) => {
console.log(state);
return ({
users: state.users,
});
},
{registerActions: registerAction, loginActions: loginAction}
)

最后把 registerActions 传给RegisterDialog子组件,

src/components/Index/RegisterDialog.js

// 省略其他代码
handleSubmit = (e) => {
e.preventDefault();
// 验证表单数据
this.refs.user.validate((valid) => {
if (valid) {
// this.state.user 为表单收集的 用户注册数据
this.props.registerActions(this.state.user);
this.setState({loading: true});
}
});
};

流程是:

  • 调用 action
    this.props.registerActions(this.state.user);
    返回action 为
{
type:REGISTER_USER,
data: this.state.user,
}
  • reducer 根据action类型更新状态
switch (action.type) {
case REGISTER_USER:
return state.merge({
'newUser': action.data,
'saveSuccess': false,
'error': null,
});
//省略其他代码

这时我们的store里的状态 newUser就被更新为 注册弹窗里收集的数据
到这里都还是同步的action,而注册是一个异步的操作。
下篇文章会介绍如何使用 redux-saga 进行异步操作。
redux-saga 已经在使用了,有兴趣的可以自行查看代码理解。

记得点star:)
项目代码地址:https://github.com/DigAg/digag-pc-react
vue2版项目代码地址:https://github.com/DigAg/digag-pc-vue2
相应后端项目代码地址:https://github.com/DigAg/digag-server

React 实践项目 (二)的更多相关文章

  1. React 实践项目 (三)

    React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架.而我学习React也有一段时间了,现在就开始用 React+Redux 进行实战! 上回说到使用Redux进行 ...

  2. React 实践项目 (五)

    React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架.而我学习React也有一段时间了,现在就开始用 React+Redux 进行实战! React 实践项目 (一 ...

  3. React 实践项目 (一)

    React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架.而我学习React也有一段时间了,现在就开始用 React+Redux 进行实战! 项目代码地址:https: ...

  4. python实践项目二:列表转字符串

    将列表各元素转换为字符串并以规定形式返回. 假定有下面这样的列表:spam = ['apples', 'bananas', 'tofu', 'cats'],将其转换成字符串:'apples, bana ...

  5. Immutable.js 以及在 react+redux 项目中的实践

    来自一位美团大牛的分享,相信可以帮助到你. 原文链接:https://juejin.im/post/5948985ea0bb9f006bed7472?utm_source=tuicool&ut ...

  6. 20155320 2016-2017-2《Java程序设计》第十二周课堂实践项目

    20155320 2016-2017-2<Java程序设计>第十二周课堂实践项目 1.修改教材P98 Score2.java, 让执行结果数组填充是自己的学号: 2.在IDEA中以TDD的 ...

  7. 在React旧项目中安装并使用TypeScript的实践

    前言 本篇文章默认您大概了解什么是TypeScript,主要讲解如何在React旧项目中安装并使用TypeScript. 写这个的目的主要是网上关于TypeScript这块的讲解虽然很多,但都是一些语 ...

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

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

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

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

随机推荐

  1. CoreCLR源码探索(六) NullReferenceException是如何发生的

    NullReferenceException可能是.Net程序员遇到最多的例外了, 这个例外发生的如此频繁, 以至于人们付出了巨大的努力来使用各种特性和约束试图防止它发生, 但时至今日它仍然让很多程序 ...

  2. Http状态码大全(来自菜鸟教程)

    HTTP协议(HyperText Transfer Protocol,超文本传输协议)是因特网上应用最为广泛的一种网络传输协议,所有的WWW文件都必须遵守这个标准. HTTP是一个基于TCP/IP通信 ...

  3. jquery deferred done then区别

    jquery deferred done then区别 deferred是jquery 对promise的实现. 以下内容基于jquery 1.8及以上版本 deferred具有then done等属 ...

  4. python——爬虫&问题解决&思考(1)

    最近刚接触python,找点小任务来练练手,希望自己在实践中不断的锻炼自己解决问题的能力.这个小爬虫来自慕课网的一门课程,我在这里记录的是自己学习的过程中遇到的问题和解决方法以及爬虫之外的思考. 这次 ...

  5. Python-快速排序

    算法思想:快速排序运用了分而治之的思想,即在所选数组中选择一个基准(任选一个都可以),以改基准为基础,将小于该基准的元素都移动基准的左边,大于该基准的数据都移动到右边,然后对左右两边进行递归处理.同样 ...

  6. Python爬知乎妹子都爱取啥名

    闲来无事上知乎,看到好多妹子,于是抓取一波. 有没有兴趣?? 目标网址https://www.zhihu.com/collection/78172986 抓取分析 爬取分析 使用pandas操作文件 ...

  7. Kotlin尝试之一:写代码前的准备

    Kotlin是一种静态类型的编程语言,可在Java虚拟机上运行,也可以编译为JavaScript源代码. 其主要发展来自位于俄罗斯圣彼得堡的JetBrains程序员团队. 虽然语法与Java不兼容,但 ...

  8. Android之自定义Adapter的ListView

    ListView的创建,一般要具备两大元素: 1)数据集,即要映射的字符串.图片信息之类. 2)适配器,实现把要映射的字符串.图片信息映射成视图(如Textview.Image等组件),再添加到Lis ...

  9. javascript常用开发笔记:一个简单强大的js日期格式化方法

    前言:一直没找到好用的javascript日期格式化工具,自己写了一个,方便以后复用 1.主要功能 (1)支持任意顺序的日期格式排列:yyyy=年,MM=月,dd=日,HH=时,mm=分,ss=秒,s ...

  10. 13.ThreadPoolExecutor线程池之submit方法

    jdk1.7.0_79  在上一篇<ThreadPoolExecutor线程池原理及其execute方法>中提到了线程池ThreadPoolExecutor的原理以及它的execute方法 ...