本文通过一个实例来说明redux 的使用方法及流程:
实现内容:1.拿store中的state的数据显示title 2.调用dispatch 方法 ,修改state里面的内容.
创建store文件夹,文件夹内创建(index.js,reducer.js,action.js),
1.index.js
import {createStore,applyMiddleware} from 'redux'
import userReducer from './reducer'
import thunk from 'redux-thunk'
//创建store单一数据源,整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store 中。
let store = createStore(
userReducer,
applyMiddleware(thunk)
)
export default store
2.reducer.js
//默认state
let defaultState = {
title: 'hello world'
}
export default (state = defaultState, action = {})=>{
//reducer通过action的type,进行处理返回新的state
if(action.type === 'set_title'){
return Object.assign({},{title:action.value})
}
return state;
}