Redux入门到使用
欢迎关注公众号：n平方
如有问题或建议，请后台留言，我会尽力解决你的问题。
简介
Redux是针对JavaScript应用的可预测状态容器。
如果熟悉设计模式之观察者模式理解起来就简单了。就是将你在其他组件中需要用到的数据放到一个容器中，那么组件就可以从其中取放数据的东西就是redux的工作。
特性：
- 可预测性(predictable): 因为Redux用了reducer与纯函数(pure function)的概念，每个新的state都会由旧的state建来一个全新的state。因而所有的状态修改都是”可预测的”。
- 状态容器(state container): state是集中在单一个对象树状结构下的单一store，store即是应用程序领域(app domain)的状态集合。
- JavaScript应用: 这说明Redux并不是单指设计给React用的，它是独立的一个函数库，可通用于各种JavaScript应用。
核心概念
action：是把数据从应用（译者注：这里之所以不叫 view 是因为这些数据有可能是服务器响应，用户输入或其它非 view 的数据 ）传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。
reducer：指定了应用状态的变化如何响应 actions,并发送到 store 的，记住 actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。
store： store就是把action和reducer联系到一起的对象，store本质上是一个状态树，保存了所有对象的状态。任何UI组件都可以直接从store访问特定对象的状态。
Store 有以下职责：
- 维持应用的 state；
- 提供
getState()方法获取 state； - 提供
dispatch(action)方法更新 state； - 通过
subscribe(listener)注册监听器; - 通过
subscribe(listener)返回的函数注销监听器。
再次强调一下 Redux 应用只有一个单一的 store。
基本原理
这个数据流的位于最中心的设计是一个AppDispatcher(应用发送器)，你可以把它想成是个发送中心，不论来自组件何处的动作都需要经过它来发送。每个store会在AppDispatcher上注册它自己，提供一个callback(回调)，当有动作(action)发生时，AppDispatcher(应用发送器)会用这个回调函数通知store。
由于每个Action(动作)只是一个单纯的对象，包含actionType(动作类型)与数据(通常称为payload)，我们会另外需要Action Creator(动作创建器)，它们是一些辅助函数，除了创建动作外也会把动作传给Dispatcher(发送器)，也就是调用Dispatcher(发送器)中的dispatch方法。
Dispatcher(发送器)的用途就是把接收到的actionType与数据(payload)，广播给所有注册的callbacks。它这个设计并非是独创的，这在设计模式中类似于pub-sub(发布-订阅)系统，Dispatcher则是类似Eventbus的概念。
基本使用
安装
npm install --save react-redux npm install --save-dev redux-devtools
实例
主要是理解观察者模式，以及结合原理图先理解
redux的action,reducer,store基本运作。
import { createStore } from 'redux'
/**
* This is a reducer, a pure function with (state, action) => state signature.
* It describes how an action transforms the state into the next state.
*
* The shape of the state is up to you: it can be a primitive, an array, an object,
* or even an Immutable.js data structure. The only important part is that you should
* not mutate the state object, but return a new object if the state changes.
*
* In this example, we use a `switch` statement and strings, but you can use a helper that
* follows a different convention (such as function maps) if it makes sense for your
* project.
*/
/**
* 来源：官网：https://github.com/reduxjs/redux
*
* 第一步：定义reducer
*/
function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
// Create a Redux store holding the state of your app.
// Its API is { subscribe, dispatch, getState }.
//第二步：根据reducer规则生成store
let store = createStore(counter)
// You can use subscribe() to update the UI in response to state changes.
// Normally you'd use a view binding library (e.g. React Redux) rather than subscribe() directly.
// However it can also be handy to persist the current state in the localStorage.
//第三步：定义数据（即state)变化之后的派发规则
store.subscribe(() => console.log(store.getState()))
store.subscribe(() => console.log(store.getState()))
store.subscribe(() => console.log(store.getState()))
// The only way to mutate the internal state is to dispatch an action.
// The actions can be serialized, logged or stored and later replayed.
//第四步：触发数据变化
store.dispatch({ type: 'INCREMENT' })
// 1
store.dispatch({ type: 'INCREMENT' })
// 2
store.dispatch({ type: 'DECREMENT' })
// 1常规使用
一般的文件结构，基本就是store目录下
actions的操作
user.js:主要包含user模块下的action操作。
import * as types from '../constants/types'
export function loginSuccess(data) {
return {
type: types.LOGOIN_SUCCESS,
payload: data
}
}
export function logOut() {
return {
type: types.LOGOUT
}
}reducers的操作
module/user.js:定义
import * as types from '../../constants/types';
export function user(state = 0,action){
switch(action.type) {
case types.LOGOIN_SUCCESS:
console.log("user......"+ action.payload);
return state+10;
case types.LOGOUT:
return state - 10;
default:
return state;
}
}index.js
将所有reducers的集合在一起。
import { combineReducers } from 'redux'
import { user } from './module/user'
const rootReducer = combineReducers({
/* your reducers */
user
})
export default rootReducerstore的操作
import { createStore } from 'redux'
import rootReducer from './reducers'
export default function configureStore(initialState) {
const store = createStore(rootReducer,initialState,
window.devToolsExtension ? window.devToolsExtension() : undefined
)
return store
}组件中的操作(简单)
import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import ComA from './ComA'
import ComB from './ComB'
import * as userInfoActions from '../store/actions/user'
class BodyIndex extends React.Component {
componentDidMount() {
this.props.userInfoActions.loginSuccess({
id:'呵呵呵呵',
username: 'bibibiibibi'
})
}
render() {
return (
<div>
<p>Hello world</p>
<ComA user={this.props.user}/>
<ComB user= {this.props.user} />
</div>
)
}
}
function mapStateToProps(state) {
console.log("mapStateToProps...."+state);
return {
user: state.user.userInfo
}
}
function mapDispatchToProps(dispatch) {
return {
userInfoActions: bindActionCreators(userInfoActions,dispatch)
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(BodyIndex)组件中的操作(常规)
使用connect 这样子可以省去mapDispatchToProps,mapDispatchToProps的操作。
import React from 'react';
import { connect } from 'react-redux';
import { addComment } from '../store/actions/comment'
@connect(
state => ({comment:state.comments.comment}),
{ addComment }
)
class TestCom extends React.Component {
componentDidMount() {
this.props.addComment({
comment: 100
})
}
render() {
console.log("render...."+this.props.comment);
return (
<div>
<p>TestCom.... {this.props.comment} </p>
</div>
)
}
}
export default TestCom;总结
最后，如果对 Java、大数据感兴趣请长按二维码关注一波，我会努力带给你们价值。觉得对你哪怕有一丁点帮助的请帮忙点个赞或者转发哦。
