对于刚学习rn的人来说，看到redux肯定会一脸懵。redux是干啥的呢，网上也有很多介绍，我就不做过多介绍了，个人把他理解成一个 小型数据库,用来处理数据的。更多详细内容看官方的吧，我只做一个个人对其理解的简单介绍。
首先我们知道rn中通过state、props这两种方式控制组件，redux就是通过改变state来控制组件的变化。怎么改变的呢，大体讲一下流程吧：
1、首先我们点击按钮或者网络数据请求回来的时候需要发消息到action内
2、action将消息预处理，即区分type，然后返回给store。
3、store将分类好的消息分配到reducer中处理state。
4、reducer接收到消息、根据type做对应的处理，生成新的state返回给store
5、store控制页面渲染
不多说了，还是边上代码边做讲解比较好，先用着，然后慢慢再理解。当我们使用redux的时候就需要在项目里添加redux依赖。
npm install --save redux
npm install --save react-redux
npm install --save redux-thunk
redux核心就三部分：Action、Reducer、Store。
- Action
想要更新state中的数据，就要发起一个动作，这就用到action了。Action内部必须使用一个字符串类型的type来表示要执行的动作。一般type都定义成字符串常量。Action只能描述有事情发生了，不能搞其他的。
import * as types from '../constants/LoginTypes'
let user = {
name: '小明',
age: 25
}
// 这里发起Action
export function login() {
return dispatch => {
dispatch(isLogining());
let result = fetch('https://www.baidu.com')
.then((res) => {
dispatch(loginSuccess(true, user))
}).catch((err) => {
dispatch(loginError(false))
})
}
}
// 这个Action标识正在登录
function isLogining () {
return {
type: types.LOGIN_IN_DOING
}
}
// 这个Action标识登录成功
function loginSuccess(isSuccess, user) {
console.log('loginSuccess')
return {
type: types.LOGIN_IN_DONE,
user: user.name
}
}
// 这个Action标识登录失败
function loginError(isSuccess){
console.log('error')
return {
type: types.LOGIN_IN_ERROR
}
}
- Reducer
reducer是干啥用的呢，个人理解其实就是MVC中的Model模型。举个例子吧，我们页面要展示用户名、性别、年龄、住址等信息，这时我们服务端接口里给返回的格式如下，这时我们需要对这些字段做处理、存数据、发送给store做页面展示用。reducer就干这个用的。
{
status:0,
userName:"小李",
age:25,
sex:"man"
address:"北京"
}
还是直接上代码吧
import * as types from '../constants/LoginTypes'
const initialState = {
status: '点击登录',
isSuccess: false,
user: null
}
export default function longinIn(state = initialState, action) {
switch (action.type) {
case types.LOGIN_IN_DOING:
return {
...state,
status: '正在登录',
isSuccess: false,
user: null
}
break;
case types.LOGIN_IN_DONE:
return {
...state,
status: '登录成功',
isSuccess: true,
user: action.user
}
break;
case types.LOGIN_IN_ERROR:
return {
...state,
status: '登录失败',
isSuccess: false,
user: null
}
default:
return state;
}
}
// 当然我们会有多个reducer，那么我们需要把不同的reducer关联到一起提供给store
import { combineReducers } from 'redux'
import loginIn from './loginReducer'
import counterIn from './CounterReducer'
module.exports = combineReducers({
loginIn:loginIn,
counterIn:counterIn
})
有码就好理解我说的model了吧，initialState是初始化。下边是根据action的type类型做相应的处理。
- Store
store是把action、reducer联系到一起的对象。它负责一下职责
- 维持应用的 state；
- 提供 getState() 方法获取 state；
- 提供 dispatch(action) 方法更新 state；
- 通过 subscribe(listener) 注册监听器;
- 通过 subscribe(listener) 返回的函数注销监听器。
'use strict';
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from '../reducers/index';
const createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore);
export default function configureStore(initialState) {
const store = createStoreWithMiddleware(rootReducer, initialState)
return store;
}
Redux 应用只有一个单一的store。当需要拆分数据处理逻辑时，你应该使用 reducer 组合 而不是创建多个 store。
- 上边三步还不行，还需要下边最重要的一步，state关联
const mapStateToProps = (state) => {
return {
user: state.loginIn.user,
}
}
const mapDispatchToProps = (dispatch) => {
return {
actions: bindActionCreators({
...loginAction
}, dispatch)
}
}
module.exports = connect(mapStateToProps, mapDispatchToProps, undefined, { withRef: true })(App)
网友评论