redux的使用

首先通过createStore()方法创建一个store,作为保存状态的对象

import {createStore} from 'redux'
const store = createStore(reducers)

如果要使用redux调试工具和中间件

import {createStore, compose, applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
const store = createStore(reducers, composeEnhancers(applyMiddleware(thunk)))
export default store

 这时你可以通过以下4中方法对store进行操作

• getState(): 获取store中当前的状态
• dispatch(action): 分发一个action,并返回这个action, 这是唯一改变store数据的方式
• subscribe(listener):注册一个监听者，当store发生改变时就会被调用
• replaceReducer(nextReducer)：更新当前store里的reducer

 

为了方便，也可以通过react-redux插件提供的组件<Provider>和方法connect()

先导入Provider，必须是顶端组件，然后将store作为props传递给以下的所有组件

import store from "./store";
import {Provider} from "react-redux";
import Hello from './hello'
<Provider store={store}>
   <Hello></Hello>
</Provider>

组件可通过connect()的方法来获取状态或方法，在组件就可以通过this.props来获取

// Hello.js部分代码
import {connect} from "react-redux";
const mapStateToProps = state => ({
    // 状态
    name: state.name,
    age: state.age
})

const mapDispatchToProps = dispatch => ({
    // 方法
    addUser (data) {
       dispatch(addUser(data))
    }  
})
export default connect(mapStateToProps, mapDispatchToProps)(App);

也可以用简便的方式：不过需要做一些配置https://blog.csdn.net/Dilomen/article/details/89519941

import {connect} from "react-redux"
import {addUser} from './redux/user.redux'
@connect(
    state => state,
    {addUser}
)

this.props就可以访问到相应的状态或方法

接着是最重要的reducer，由于store是只读的，即不能直接进行修改，所以需要通过reducer来进行迭代状态，通过原来的状态和改变的状态组成新的状态来返回

创建一个reducer.js文件，可以拆分多个文件结构，如果内容不多，也可以组合在一个文件

1. 将要使用的字符串赋值给变量，方便调试
2. 定义一个初始化状态，并通过ES6的参数默认值来赋值给state，使state有个初始状态
3. 最关键的通过一个函数，参数为state(原先状态)，action(改变的状态)，通过return来返回一个新的状态
4. addUser()这些导出的方法作为组件调用的方法，来触发操作状态
5. 通过调用addSuccess()方法，主要是返回一个对象，该对象必须包含一个type属性，以便reducer进行判断，从而得到新的state

const USER = 'USER'
const initState = {
    name: '',
    age: ''
}
export default (state = initState, action) => {
        switch (action.type) {
            case USER:
                return {...state, name: action.name, age: action.age}
            default:
                return state
        }
}
function addSuccess(data) {
    return {type: 'USER', name: data.name, age: data.age}
}
export function addUser (data)  {
    return dispatch => {
        dispatch(addSuccess(data))
    }
}

 由于状态是不可变的，所以需要以下方式来return出新的state

• 使用对象展开符{...state}
• 使用immutable插件
• 使用深拷贝的方法
• 使用Object({},state,改变的对象)  第一个参数必须是{}

由于项目可以比较大，希望通过拆分多个reducer来方便维护，就可以用到combineReducers 

import user from './redux/user_redux'
import login from './redux/login_redux'
import detail from './redux/detail_redux'

import { combineReducers } from 'redux-immutable'
const reducer = combineReducers({
    user,
    login,
    detail
})

这样就可以将多个reducer组合在一起了，但是需要多一层获取