redux更新store中的数据繁琐，我整合了一些代码，使更新store中
Redux集成setProps方法---- 适用于react和react-native开发 说明：在当前store里新增一个变量（我称之为新增props，下同） 当前redux使用方式在react和react-native中经常用到redux 我们用redux建立了一个store，用来存储项目数据，它相对项目的单页面是props 项目入口文件index.html <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> </title>
</head>
<body>
<div id="root"></div>
</body>
</html>
index.js import {Promise,polyfill} from 'es6-promise'
import React,{Component} from 'react';
import { render } from 'react-dom';
import {Provider} from 'react-redux';
/*import containers*/
import App from './containers/App';
import configureStore from './store/configureStore';
const store = configureStore();
appInit();
render(
<Provider store={store} >
<App/>
</Provider>,document.getElementById('root')
);
redux store配置store/configureStore.js import { createStore,applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers';
const createStoreWithMiddleware = applyMiddleware(
thunk
)(createStore);
export default function configureStore (initialState) {
try{
const store = createStoreWithMiddleware(rootReducer,initialState);
return store;
}catch(e){
// alert(e);
console.log(e);
}
}
constants配置/* APP Page Constants */ export const GET_CLIENTINFO = 'GET_CLIENTINFO'; export const GET_LOCATIONINFO = 'GET_LOCATIONINFO'; export const SET_NETWORK_STATUS = 'SET_NETWORK_STATUS'; /* Book Page Constants */ export const SET_CONTACT = 'SET_CONTACT'; /****************************************** 这里省略了N多条常量声明 */ export const INVOICE_HISTORY = 'INVOICE_HISTORY'; /* OrderDetail Page Constants */ export const GET_ORDERDETAIL = 'GET_ORDERDETAIL'; export const GET_INVOICE_PROGRESS = 'GET_INVOICE_PROGRESS'; reducers配置reducers/index.js import { combineReducers } from 'redux';
import orderDetail from './orderDetail';
import book from './book';
import app from './app';
const rootReducer = combineReducers({
orderDetail,book,app
});
export default rootReducer;
reducers/app.js（reducers/book.js、 reducers/ orderDetail.js与此类似） import assign from 'object-assign';
import {
GET_CLIENTINFO,/**********这里省略了N多条相似语句*/
SET_PROPS_APP
} from '../constants';
var initialState = {
osType: '',//操作系统
/**********这里省略了N多变量*/
customerServiceURL:'',//获取客服地址链接
};
export default function app(state = initialState,action) {
switch (action.type) {
case SET_PROPS_APP: //获取客户端信息
return assign({},state,action.newObj);
/*************************** 这里省略了N多条相似case语句*/
case SET_NETWORK_STATUS:
return assign({},{networkStatus: action.networkStatus});
}
return state;
}
actions/app.js (actions/book.js、 actions/ orderDetail.js与此类似)import {GET_CLIENTINFO,GET_LOCATIONINFO,SET_NETWORK_STATUS,SET_PROPS_APP} from '../constants';
/**设置联系人*/
export function setContact(contactInfo) {
return {
type: ActionTypes.SET_CONTACT,contactInfo
}
}
/*****************************此处省略N多个dispatch action方法******************************/
/**设置地址*/
export function setStartAddress(addressInfo) {
return {
type: ActionTypes.SET_START_ADDRESS,addressInfo
};
}
/*****************************下面才是真正的业务方法******************************/
...
当前store里新增一个变量（我称之为新增props，下同）需要干这么工作：
新增props遇到的问题：
思考解决这个问题：
修改前后的constants对比修改前的constants /* APP Page Constants */ export const GET_CLIENTINFO = 'GET_CLIENTINFO'; export const GET_LOCATIONINFO = 'GET_LOCATIONINFO'; export const SET_NETWORK_STATUS = 'SET_NETWORK_STATUS'; /* Book Page Constants */ export const SET_CONTACT = 'SET_CONTACT'; /****************************************** 这里省略了N多条常量声明 */ export const INVOICE_HISTORY = 'INVOICE_HISTORY'; /* OrderDetail Page Constants */ export const GET_ORDERDETAIL = 'GET_ORDERDETAIL'; export const GET_INVOICE_PROGRESS = 'GET_INVOICE_PROGRESS'; 修改后的constants export const SET_PROPS_APP = 'SET_PROPS_APP'; export const SET_PROPS_BOOK = 'SET_PROPS_BOOK'; export const SET_PROPS_DETAIL = 'SET_PROPS_DETAIL'; 修改前后的reducers/app.js对比修改前 import assign from 'object-assign';
import {
GET_CLIENTINFO,{networkStatus: action.networkStatus});
}
return state;
}
修改后 import * as ActionTypes from '../constants/ActionTypes';
import assign from 'object-assign';
var initialState = {
osType: '',//获取客服地址链接
};
export default function app(state = initialState,action){
if(action.type == ActionTypes.SET_PROPS_APP){
state = assign({},action.newObj);
}
return state;
}
修改前后的actions/app.js对比修改前 import {GET_CLIENTINFO,addressInfo
};
}
/*****************************下面才是真正的业务方法******************************/
...
修改后 import * as ActionTypes from '../constants/ActionTypes';
/**************************只有一个dispatch Action 方法**************************/
export function setPropsApp(newObj){
return {
type: ActionTypes.SET_PROPS_APP,newObj
};
}
/*****************************下面是真正的业务方法******************************/
...
完整demo代码
实际使用经验
export function setProps(state,dataPage,newObj){
state[dataPage] = assign({},state[dataPage],newObj);
return state;
}
var data ={
app:{version:1,name:'cbd'},book:{saleDays:30,orderAmountMoney:0},detail:{orderSerialId:"订单流水号",remark:'备注信息'}
};
data = setProps(data,'app',{version:2});
console.log('data1',data);
data = setProps(data,'book',{saleDays:40});
console.log('data2','detail',{remark:'备注信息22'});
console.log('data3',data);
以后更新store中的数据只需要一行代码setPropsApp({ variablesName : variablesValue }); setPropsApp：更新APP页面的props变量方法 variablesName ：要更新的变量名variablesValue ：要更新的变量新值 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |