Redux 分为store,reducers,action,话不多说直接贴代码。
首先是reducers中定义一些type键,用于reducers处理状态
const LOGIN = 'LOGIN';
const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
const LOGIN_FAIL = 'LOGIN_FAIL';
然后就是reducers的纯函数
const initialState = {
isLoginIn: false,
userInfo: {},
msg: ''
};
export default function loginReducer (state = initialState, action) {
switch (action.type) {
case LOGIN:
return {
...state,
isLoginIn: false,
userInfo: {}
};
case LOGIN_SUCCESS:
console.log('LOGIN_SUCCESS');
console.log(action);
return {
...state,
isLoginIn: true,
userInfo: action.userInfo
};
case LOGIN_FAIL:
console.log('LOGIN_FAIL');
console.log(action);
return {
...state,
isLoginIn: false,
};
default:
return state;
}
};
initialState 是初始状态,是你需要用到的一些数据或者状态,type里面是状态更新...state 复制一份state,一般不在原state上做更改。
/**
* action: login
*/
export function performLoginAction(username, password) {
return (dispatch) => {
dispatch({'type': LOGIN})
Util.post(API.LOGIN,{'phone':username,'password':password},function(ret){
console.log(ret);
if (ret.code == 200) {
dispatch({'type': LOGIN_SUCCESS, userInfo: ret.data, msg: ret.msg,isLoginIn: true})
}else {
dispatch({'type': LOGIN_FAIL, msg: ret.msg, isLoginIn: false})
}
})
}
}
这里就是一个action,就是一个网络请求,对请求结果进行处理,成功或者失败都使用dispatch分发处理type,给state赋值。这里就是一个reducer的内容,其实是把action和reducer合在一起进行处理。
接下来就是store 完全的复制粘贴就可以了
'use strict';
import {createStore, applyMiddleware} from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from './Reducers/reducers';
const createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore);
export default function configureStore(initialState) {
const store = createStoreWithMiddleware(rootReducer, initialState);
return store;
}
需要注意的是rootReducer是所有的reducer的合集,下面只是一个reducer,创建多个reducer也是在这块写。
import {combineReducers} from 'redux';
import LoginReducer from './login';
const rootReducer = combineReducers({
login: LoginReducer,
});
export default rootReducer;
store写完之后,就要去程序根js中嵌套,
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {Provider} from 'react-redux'
import Root from './src/Component'
import configureStore from './src/Redux/creat'
const store = configureStore();
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
<Root />
</Provider>
)
}
}