1.介绍
- redux: 状态管理工具
- store: 一个项目只会有一个store
- redux数据流: view用户界面(onClick)操作 => action(动作) => reducer(修改state)
2.Redux三大基本原则
- store单一数据源
- state在页面里是只读的,触发action => 修改state
- state只能在reducer里面修改,并且reducer必须是纯函数
3.安装配置
cnpm i down -S
redux
react-redux
redux-promise //可以让action实现异步请求
redux-thunk //可以让action以函数的形式书写
4.在src目录下创建reducer文件夹,内包含对应的js文件
const defaultState = {
data: [],
title: '我是list'
}
export default function listReducer(state = defaultState, action) {
switch (action.type) {
case 'FETCH_LIST_DATA':
return { ...state, data: action.payload.result.list }
default:
return state
}
}
5.在src目录下创建store.js文件
import { createStore, compose, combineReducers, applyMiddleware } from 'redux'
//promise可以让action实现异步的方式
import promise from 'redux-promise'
//thunk可以让action以函数的形式去写
import thunk from 'redux-thunk'
import List from '@/reducer/list'
//配合redux插件使用
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
const store = createStore(
//合并reducer
combineReducers({
list:List
}),
composeEnhancers(applyMiddleware(thunk, promise))
)
export { store }
6.在src目录下创建actions文件夹,内包含对应的js文件
import { post } from '@/utils/request'
//这个是封装的axios和拦截器
export function getData (options) {
return {
type: 'FETCH_LIST_DATA',
payload: post('数据接口')
}
}
7.在页面级页面派发aciton
import React from 'react'
import { connect } from 'react-redux'
//引入action
import { getData } from '@/actions/list'
export default @connect(state => {
return {
//这里是从reducer返回过来的数据
data: state.list.data,
title: state.list.title
}
}, {
//这里放的是action
getData
})
这里是一个class类写页面布局