(0)初始准备
npm install --save redux
npm install --save react-redux
npm install --save-dev redux-devtools
(1)redux各个参数的相关介绍
1.state: 存储数据的仓库
2.action: 改变state中数据的方法
3.reducer: 就是将state和action联系起来,从而改变state的数据
4.combineReducers: 如果你的reducer是多个的,combineReducers 可以把他们合并在一起
(2)store的相关方法
1.getState():获取state中的数据
2.subscribe():当通过reducer改变state中的数据时,可以做到监听,为了重新渲染view层
3.dispatch():触发reducer
(3)例子:改变login组件的相关数据
a.在src文件夹下新增store文件夹
b.在store文件夹下新增login文件夹,index.js文件,reducer.js文件
c.在login文件夹下新增state.js,action.js,reducer.js文件
d.store/login/state.js
export default {
logoName: '中科软科技',
gwurl: 'http://www.sinosoft.com.cn/'
}
e.store/login/action.js
export const getLogoNameAction = (value) => ({
type: 'changeLogoName',
value: value,
});
f.store/login/reducer.js
// 导入state数据
import initState from './state'
export default (state = initState, action) => {
switch (action.type) {
case 'changeLogoName':
const newState = JSON.parse(JSON.stringify(state));//简单的深拷贝
newState.logoName = action.value;
return newState;
default:
return state
}
}
g. store/reducer.js
import { combineReducers } from 'redux'
import reducer_login from './login/reducer'
export default combineReducers({
reducer_login
})
h. store/index.js
import {createStore} from 'redux';
import reducer from './reducer';
// store是唯一的
// 只有store才能改变自己的内容(state)
// reducer必须是纯函数
// 把 reducer 放进 createStore 里 创建store
const store = createStore(reducer);
export default store;
文件代码已经写好,下面放入view层
下面图片展示用到的代码
// 取自定义的action函数
import {getLogoNameAction} from '../../../store/login/action'
this.state = {
collapsed: false,
storeData: store.getState().reducer_login,
}
store.subscribe(this.StoreChange)
StoreChange = () => {
this.setState({storeData: store.getState().reducer_login})
}
大功告成