react之redux详解及例子展示（简单）

（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})
    }

大功告成