5-1、Redux概念简述
-
Redux = Reducer + Flux(2013官方推荐的数据存储插件)
image.png
5-2、Redux的工作流程
image.png
image.png
5-3、使用Antd实现TodoList页面布局
- yarn add antd || npm install antd --save // 安装Antd
import 'antd/dist/antd.css'
import { Input,Button,List } from 'antd'
<div style={{marginTop: '10px',marginLeft: '10px'}}>
<Input style={{width: '300px',marginRight: '10px'}} placeholder="todo info" />
<Button type="primary">提交</Button>
<List
style={{margin: '10px 0',width: '300px'}}
bordered
dataSource={data}
renderItem={item => <List.Item>{item}</List.Item>}
/>
</div>
5-4、创建redux中的store
- npm install redux --save
-
src/TodoList.js
import React,{Component,Fragment} from 'react'
import 'antd/dist/antd.css'
import { Input,Button,List } from 'antd'
import './style.css'
import store from './store'
class TodoList extends Component {
constructor (props) {
super(props);
this.state = store.getState()
}
render(){
return (
<Fragment>
<div style={{marginTop: '10px',marginLeft: '10px'}}>
<Input value={this.state.inputValue} style={{width: '300px',marginRight: '10px'}} placeholder="todo info" />
<Button type="primary">提交</Button>
<List
style={{margin: '10px 0',width: '300px'}}
bordered
dataSource={this.state.list}
renderItem={item => <List.Item>{item}</List.Item>}
/>
</div>
</Fragment>
)
}
}
export default TodoList
-
src/store/index.js
import { createStore } from 'redux'
import reducer from './reducer'
const store = createStore(reducer)
export default store
-
src/store/reducer.js
const defaultStore = {
inputValue: 'hello world',
list: ['Racing car sprays burning fuel into crowd.',
'Japanese princess to wed commoner.',
'Australian walks 100km after outback crash.',
'Man charged over missing wedding girl.',
'Los Angeles battles huge wildfires.']
}
export default (state = defaultStore, action) => {
return state
}
5-5、Action和Reducer的编写，5-6、使用Redux完成TodoList删除功能
Redux DevTools 插件下载https://github.com/zalmoxisus/redux-devtools-extension，低版本插件会报Cannot read property 'state' of undefined的错，升级下插件就解决了。
// src/store/index.js中添加配置信息
const store = createStore(
reducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() // 添加的配置信息
)
// 在5-4中src/TodoList.js文件中添加方法
<Input
onChange={this.handleInputChange}
/>
<Button type="primary" onClick={this.handleButtonClick}>提交</Button>
<List
style={{margin: '10px 0',width: '300px'}}
bordered
dataSource={this.state.list}
renderItem={(item,index) => <List.Item onClick={this.handleItemDelete.bind(this, index)}>{item}</List.Item>}
/>
constructor (props) {
super(props);
this.state = store.getState()
this.handleInputChange = this.handleInputChange.bind(this)
this.handleStoreChange = this.handleStoreChange.bind(this)
this.handleButtonClick = this.handleButtonClick.bind(this)
// 订阅事件,监听store中数据变化会执行this.handleStoreChange方法
store.subscribe(this.handleStoreChange)
}
handleInputChange (e) {
console.log(e.target.value)
const action = {
type: 'change_input_value',
value: e.target.value
}
store.dispatch(action)
}
handleStoreChange () {
console.log('store change')
this.setState(store.getState())
}
handleButtonClick () {
const action = {
type: 'add_todo_item'
}
store.dispatch(action)
}
handleItemDelete (index) {
const action = {
type: 'delete_todo_item',
index: index
}
store.dispatch(action)
}
5-7、ActionTypes的拆分
- 拆分后虽然看似复杂了，需引入两次
优点：- 方便统一管理
- types书写错误时不会报错，不容易排查，如果换成变量则会有提示性报错
// 新建src/store/actionTypes
const CHANGE_INPUT_VALUE = 'change_input_value'
const ADD_TODO_ITEM = 'add_todo_item'
const DELETE_TODO_ITEM = 'delete_todo_item'
// 将reducer.js和ToDoList.js中的'change_input_value'字符串用变量替换，同时需引入
import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM } from './store/actionTypes'
5-8、使用actionCreator统一创建action
- 项目代码结构复杂时，方便统一管理
// 新建src/store/actionCreators.js文件
import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM } from './actionTypes'
export const getInputChangeAction = (value) => ({
type: CHANGE_INPUT_VALUE,
value
})
export const getAddItemAction = () => ({
type: ADD_TODO_ITEM
})
export const getDeleteItemAction = (index) => ({
type: DELETE_TODO_ITEM,
index
})
5-9、Redux知识点复习补充
- store是唯一的
- 只有store能够改变自己的内容
- reducer 可以接收state，但是绝不能修改state
- Reducer必须是纯函数
纯函数：给定固定的输入，就一定会有固定的输出，而且不会有任何副作用
Redux的核心API
- ccreateStore // 创建store
- store.dispatch // 派发action，传递给store
- store.getState // 获取到store中所有的数据内容
- store.subscribe // 订阅store的改变，只要store发生改变，subscribe接收的回调函数就会被执行
