文章目录
- 1 下载依赖
- 2 编写
-
- 4 拆分组件化+axios
1 下载依赖
cnpm i redux react-redux react-thunk -S
2 编写
- 1 创建store/index.js
引入redux 引入监听 暴露函数
- 2 reducer.js
默认参数 暴露函数
- 3 将组件抽离
要共享数据的组件 react-redux producer connect
- 4 reducer.js 类型 进行业务操作
2.1
import React,{
Component} from 'react'
import {
TodoHead,TodoInput,TodoList} from './component'
import {
connect} from 'react-redux'
class APP extends Component{
constructor() {
super();
this.state={
}
}
render() {
return(
<div>
<TodoHead {
...this.props}/>
<TodoInput {
...this.props} myadd={
this.props.addItem}/>
<TodoList {
...this.props} changeBox={
this.props.changeBox} />
</div>
)
}
}
const mapState = state => state
const mapAction = dispatch=>{
return{
addItem(title){
dispatch({
type:'ADD_ITEM',
title
})
},
changeBox(id){
dispatch({
type:"CHECK_BOX",
id
})
}
}
}
export default connect(mapState,mapAction)(APP)
const defaultProps = {
title:'待办事项',
input:'请输入添加内容',
btnText:'添加',
columns: [
{
label: "id",
prop: "id",
width: 180
},
{
label: "名称",
prop: "title",
width: 180
},
{
label: "状态",
prop: "status"
}
],
todos:[
{
id:1,
title:"吃饭",
status:false
},
{
id:2,
title:"睡觉",
status:true
},
{
id:3,
title:"打豆豆",
status:false
}
]
}
export default (state=defaultProps,action)=>{
switch (action.type) {
case 'ADD_ITEM':
let newAdd = JSON.parse(JSON.stringify(state))
newAdd.todos.push({
id:new Date().getTime(),
title:action.title,
status:false
})
return newAdd
case 'CHECK_BOX':
let newSub = JSON.parse(JSON.stringify(state))
newSub.todos.map(el=>{
if(el.id===action.id){
el.status=!el.status
}
return el
})
return newSub
default:
return state
}
}
import {
createStore} from 'redux'
import Reducer from './reducer'
export default createStore(Reducer)
4 拆分组件化+axios
import {
ADD_ITEM,CHECK_BOX,GET_TODO} from '../types'
import axios from '../../API'
export const addItem = (title)=>{
return{
type:ADD_ITEM,
title
}
}
export const changeBox = (id)=>{
return{
type:CHECK_BOX,
id
}
}
export const getTodosAction =()=>{
return{
type:GET_TODO
}
}
export const getTodos = () => async dispatch=>{
const res = await axios.get('/todos')
dispatch(getTodosAction(res.data))
console.log(res)
}
import {
ADD_ITEM, CHECK_BOX, GET_TODO} from '../types'
const defaultProps = {
title:'待办事项',
input:'请输入添加内容',
btnText:'添加',
columns: [
{
label: "id",
prop: "id",
width: 180
},
{
label: "名称",
prop: "title",
width: 180
},
{
label: "状态",
prop: "status"
}
],
todos:[
{
id:1,
title:"吃饭",
status:false
},
{
id:2,
title:"睡觉",
status:true
},
{
id:3,
title:"打豆豆",
status:false
}
]
}
export default (state=defaultProps,action)=>{
switch (action.type) {
case ADD_ITEM:
let newAdd = JSON.parse(JSON.stringify(state))
newAdd.todos.push({
id:new Date().getTime(),
title:action.title,
status:false
})
return newAdd
case CHECK_BOX:
let newSub = JSON.parse(JSON.stringify(state))
newSub.todos.map(el=>{
if(el.id===action.id){
el.status=!el.status
}
return el
})
return newSub
case GET_TODO:
let newData = JSON.parse(JSON.stringify(state))
console.log(newData)
return newData
default:
return state
}
}
import React,{
Component} from 'react'
import {
TodoHead,TodoInput,TodoList} from './component'
import {
connect} from 'react-redux'
import {
addItem,changeBox,getTodos} from './store/actions'
class APP extends Component{
render() {
return(
<div>
<TodoHead {
...this.props}/>
<TodoInput {
...this.props} myadd={
this.props.addItem}/>
<TodoList {
...this.props} changeBox={
this.props.changeBox} />
</div>
)
}
componentDidMount() {
this.props.getTodos()
}
}
const mapState = state => state
const mapAction = dispatch=>{
return{
addItem(title){
dispatch(addItem(title))
},
changeBox(id){
dispatch(changeBox(id))
},
getTodos(){
dispatch(getTodos())
}
}
}
export default connect(mapState,mapAction)(APP)
