首先通过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文件,可以拆分多个文件结构,如果内容不多,也可以组合在一个文件
- 将要使用的字符串赋值给变量,方便调试
- 定义一个初始化状态,并通过ES6的参数默认值来赋值给state,使state有个初始状态
- 最关键的通过一个函数,参数为state(原先状态),action(改变的状态),通过return来返回一个新的状态
- addUser()这些导出的方法作为组件调用的方法,来触发操作状态
- 通过调用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组合在一起了,但是需要多一层获取