redux做一个简单的todolist
redux一个简单的使用案例
在使用react的时候能否看自己是否能上手,也就是自己能不能熟练手写一个todolist这个简单的功能啦,那么话不多说,先来看代码
先看一个主要的组件
import React, {
Component } from 'react'
import 'antd/dist/antd.css'
import {
Input,Button,List} from 'antd'
import Item from 'antd/lib/list/Item'
import store from './store'
import {
changeInputAction, addItemAction, deleteItemAction } from "./store/actionCreatores"
class ReduxTodoList extends Component {
constructor(props) {
super(props)
this.state = store.getState()
this.changeValue=this.changeValue.bind(this)
this.addList=this.addList.bind(this)
this.storeChange = this.storeChange.bind(this) //转变this指向
store.subscribe(this.storeChange) //订阅Redux的状态
}
addList () {
const action =addItemAction()
store.dispatch(action)
}
deleteItem (index) {
const action = deleteItemAction(index)
store.dispatch(action)
}
changeValue (e) {
const action = changeInputAction(e.target.value)
store.dispatch(action)
}
render() {
return (
<div style={
{
margin:"10px",width:'600px'}}>
<Input
placeholder={
this.state.inputValue}
style={
{
margin:"10px",width:'300px'}}
onChange={
this.changeValue}
value={
this.state.inputValue}
/>
<Button type="primary" onClick={
this.addList}>增加</Button>
<List
style={
{
width:'300px'}}
bordered
dataSource={
this.state.list}
renderItem={
(item,index)=>(<List.Item onClick={
this.deleteItem.bind(this,index)}>{
item}</List.Item>)}
/>
</div>
);
}
storeChange () {
this.setState(store.getState())
console.log(this.state)
}
}
export default ReduxTodoList
store文件夹的index.js文件,store为状态管理
import {
createStore } from 'redux' // 引入createStore方法
import reducer from './reducer'
const store = createStore(reducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()) // 创建数据存储仓库
export default store //暴露出去
写Redux Action的时候,我们写了很多Action的派发,产生了很多Action Types,如果需要Action的地方我们就自己命名一个Type,会出现两个基本问题:这些Types如果不统一管理,不利于大型项目的服用,设置会长生冗余代码。因为Action里的Type,一定要和Reducer里的type一一对应在,所以这部分代码或字母写错后,浏览器里并没有明确的报错,这给调试带来了极大的困难。
整理分离action的type,便于管理与测试的actionTypes.js文件
export const CHANGE_INPUT = 'changeInput'
export const ADD_ITEM = 'addItem'
export const DELETE_ITEM = 'deleteItem'
ToDoList组件里有很多Action,并且分散才程序的各个地方,如果庞大的工程,这势必会造成严重的混乱,那这节课就把所有的Redux Action放到一个文件里进行管理。把action 抽离出来,更好的actionCreatores.js文件
import {
CHANGE_INPUT, ADD_ITEM, DELETE_ITEM } from "./actionTypes"
export const changeInputAction = (value) => ({
type:CHANGE_INPUT,
value
})
// =>({})---就是箭头函数返回一个对象,省略一个return 直接写{}会被解析成代码块
export const addItemAction = () => ({
type:ADD_ITEM,
})
export const deleteItemAction = (index) => ({
type:DELETE_ITEM,
index
})
最重要的逻辑处理数据的reducer.js
import {
CHANGE_INPUT, ADD_ITEM, DELETE_ITEM } from "./actionTypes"
const defaultState = {
inputValue:"请输入v",
list:[
"每天番茄中记时完成任务",
"每日简历投递",
"每日学习文章总结分享"
]
}
//state 是原始分数据状态,action传递过来的方法和更改的额状态
export default (state=defaultState,action) =>{
console.log (state,action)
if(action.type=== CHANGE_INPUT) {
let newState =JSON.parse(JSON.stringify(state)) //深拷贝state
newState.inputValue=action.value
console.log(newState)
return newState
}
if(action.type=== ADD_ITEM) {
let newState = JSON.parse(JSON.stringify(state))
newState.list.push(newState.inputValue) //push新的内容到列表中去
newState.inputValue = ''
console.log (newState)
return newState
}
if (action.type=== DELETE_ITEM) {
let newState = JSON.parse(JSON.stringify(state))
newState.list.splice(action.index,1)
return newState
}
return state
}
几点注意
1.reducer必须是个纯函数,
什么是纯函数???
如果函数的调用参数相同,则永远返回相同的结果。它不依赖于程序执行期间函数外部任何状态或数据的变化,必须只依赖于其输入参数。
简单的理解为返回的结果是由传入的值决定的,而不是其它的东西决定的不能调用其他数据,ajax,newDate都是不行的
2.只有store能改变自己的内容,reducer只是返回了一个数据,返回到store中,store拿到数据自己做了更新
真的要多敲几遍,把逻辑理清就好啦
码而不思则殆,学而不码也殆,多敲几遍吧~~~