1.安装
npm install --save redux
Redux Dev Tools // 调试工具 谷歌扩展插件 科学上网
2.创建一个store文件夹在文件夹下创建一个index.js文件
import { createStore } from 'redux' // 引入createStore方法
const store = createStore() // 创建数据存储仓库
export default store //暴露出去
3.在store文件夹下，新建一个文件reducer.js
const defaultState = {
inputValue: '默认',
List: [
'数据1',
]
} //默认数据
//就是一个方法函数
export default (state = defaultState,action)=>{
return state
}
4. reducer引入到store中
import { createStore } from 'redux' // 引入createStore方法
import reducer from './reducer'
const store = createStore(reducer) // 创建数据存储仓库
export default store //暴露出去
5.获得stroe中的数据
import store from './store/index'//引入store
constructor(props){ //初始化赋值使用
super(props)
this.state=store.getState();
console.log(this.state)
}
</div>{this.state.inputValue} <div> //得到 ‘默认’
6. 修改Redux里State的值
1.创建Action；type:事件类型 value：参数
inputChange(e){
const action ={
type:'change_input_value',
value:e.target.value
}
store.dispatch(action)
}
// 通过dispatch()方法传递给store
2. Reducer处理数据
export default (state = defaultState,action)=>{
if(action.type === 'changeInput'){ //判断类型
let newState = JSON.parse(JSON.stringify(state))//深度拷贝state
newState.inputValue = action.value
return newState
}
if (action.type === 'changeList') {//添加数组一项
if (state.inputValue !== '') {
let newState = JSON.parse(JSON.stringify(state))
newState.List.push(newState.inputValue)
newState.inputValue = ''
return newState
}
}
return state
}
3订阅更新
//回到页面订阅Redux的状态
constructor(props){
super(props)
store.subscribe(this.storeChange) //订阅Redux的状态
}
storeChange(){
this.setState(store.getState())
}
7. 优雅的管理action.type
1. src/store文件夹下面，新建立一个actionTypes.js文件
2. 提取type统一管理
const ActionsType = {
CHANGE_INPUT: 'changeInput', //文本框改变
CHANGE_LIST: 'changeList', //数组改变
DEL_LIST: 'delList', //删除数组
}
export default ActionsType
3. 页面引入actionTypes使用
import ActionsType from './store/actionTypes'
const action = {
type: ActionsType.CHANGE_INPUT,
value: e.target.value
}
4.引入actionType.js文件
if (action.type === ActionsType.CHANGE_INPUT) {
let newState = JSON.parse(JSON.stringify(state))
newState.inputValue = action.value
return newState
}
if (action.type === ActionsType.CHANGE_LIST) {
if (state.inputValue !== '') {
let newState = JSON.parse(JSON.stringify(state))
newState.List.push(newState.inputValue)
newState.inputValue = ''
return newState
}
}
8.优雅的管理Action
1. 在/src/store文件夹下面，建立一个新的文件actionCreates.js
2. 提取action
import ActionsType from './actionTypes'
//输入框改变
export const changeInputAction = (value) => ({
type: ActionsType.CHANGE_INPUT,
value: value
})
//数组添加
export const changeListAction = () => ({
type: ActionsType.CHANGE_LIST,
})
//数组删除
export const delListAction = (value) => ({
type: ActionsType.DEL_LIST,
value: value
})
3.引入actionCreates.js使用
import { changeInputAction, changeListAction, delListAction } from './store/actionCreates'
//使用changeInputAction
const action = changeInputAction(e.target.value)
store.dispatch(action)
//使用changeListAction
const action = changeListAction()
store.dispatch(action)
//使用delListAction
const action = delListAction(index)
store.dispatch(action)
9.无状态组件
// 无状态组件
const TodoListUi = (props) => {
return (
<div>
<Input
placeholder={props.inputValue}
value={props.inputValue}
style={{ width: '200px' }}
onChange={props.changeInputValue}
/>
<Button onClick={props.chlickBtn} > 添加 </Button>
<div style={{ width: '200px' }}>
<List
bordered
dataSource={props.List}
renderItem={(item, index) => (
<List.Item onClick={() => { props.chlickBtnList(index) }} >
{item}
</List.Item>
)
}
/>
</div>
</div>
)
}
export default TodoListUi;
// 使用
<TodoListUi
inputValue={this.state.inputValue}
List={this.state.List}
changeInputValue={this.changeInputValue}
chlickBtn={this.chlickBtn}
chlickBtnList={this.chlickBtnList}
/>
10. Redux-thunk中间件
1.安装
npm install --save redux-thunk
2.在 store下的index.js文件里添加thunk
写法1：
import { createStore, applyMiddleware, compose } from 'redux'
import reducer from './reducer'
import thunk from 'redux-thunk'
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose//写法1
const enhancer = composeEnhancers(applyMiddleware(thunk))//写法1
const store = createStore(
reducer,
enhancer//写法1
);
export default store
写法2
import { createStore, applyMiddleware, compose } from 'redux'
import reducer from './reducer'
import thunk from 'redux-thunk'
// 用于chrome redux的扩展项 //写法2
const reduxExtension = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
const store = createStore(
reducer,
compose(applyMiddleware(thunk), reduxExtension) //写法2
);
export default store
3使用 thunk
以前actionCreators.js都是定义好的action，根本没办法写业务逻辑，有了Redux-thunk之后，可以把TodoList.js中的componentDidMount业务逻辑放到这里来编写。也就是把向后台请求数据的代码放到actionCreators.js文件里。那我们需要引入axios,并写一个新的函数方法。（以前的action是对象，现在的action可以是函数了，这就是redux-thunk带来的好处）
示例：
1.actionTypes.js中 添加新类型
const ActionsType = {
CHANGE_INPUT: 'changeInput', //文本框改变
CHANGE_LIST: 'changeList', //数组改变
DEL_LIST: 'delList', //删除数组
+ GET_LIST: 'getList',//获取数据
}
2.reducer.js中添加修改数据方法
if (action.type === ActionsType.GET_LIST) {
let newState = JSON.parse(JSON.stringify(state))
newState.List = action.value
return newState
}
3.actionCreators.js添加下面方法
//数据渲染
export const getListAction = (value) => ({
type: ActionsType.GET_LIST,
value: value
})
//异步数据添加
export const getToList = () => {
return (dispatch) => { //支持传递一个dispatch
setTimeout(function () {
console.log('123');
const data = ['延时2秒', 'res.data', '获取数据']
const action = getListAction(data) //直接调用上面声明的方法
dispatch(action);
}, 2000); //这里2000代表两秒
}
}
4.TodoList.js中的componentDidMount使用
import {changeInputAction, changeListAction, delListAction, getToList } from './store/actionCreates'
.....
componentDidMount() {
const action = getToList()
store.dispatch(action);
}
