redux的入门学习 分离的巩固

1:新建一个两个页面   一个页面放用户的新增    一个页面用户的列表  

import React, { Component } from 'react'

export default class UserAdd extends Component {
    render() {
        return (
            <div>
                新增用户
                用户名<input ref="username"/>
                年龄<input ref="userage"/>
                <button>新增</button>
            </div>
        )
    }
}

import React, { Component } from 'react'
import  "../css/user.css";

export default class UserList extends Component {
    render() {
        return (
            <div className="userlist">
                    <div className="userlist-header">
                        <div className="userlist-item">姓名</div>
                        <div className="userlist-item">年龄</div>
                        <div className="userlist-item">操作</div>
                    </div>
                    <div className="userlist-tr">
                        <div className="userlist-item">姓名</div>
                        <div className="userlist-item">年龄</div>
                        <div className="userlist-item">操作</div>
                    </div>
            </div>
        )
    }
}

2:在reducer中新建一个userReducer.js  

let   initState = { //初始化数据
    list:[{
        id:1,username:"leson",userage:18
    }]
}

let   userReducer =(state=initState,action)=>{

    return  state;
}

export default  userReducer;

3:reducer的合并   store/index.js中

import  {createStore,combineReducers} from  "redux"
import  numReducer from "../reducer/numReducer"
import   userReducer from  "../reducer/userReducer";

let  allReducer = combineReducers({//合并
    numInfo:numReducer,
    userInfo:userReducer
});


export default  createStore(allReducer);

 4:用户列表使用userReducer中的list

import React, { Component } from 'react'
import  "../css/user.css";
import   store from  "../store";

export default class UserList extends Component {
    constructor(props){
        super(props);
        // console.log(store.getState());
    }
    render() {

        return (
            <div className="userlist">
                    <div className="userlist-header">
                        <div className="userlist-item">姓名</div>
                        <div className="userlist-item">年龄</div>
                        <div className="userlist-item">操作</div>
                    </div>

                    {store.getState().userInfo.list.map((item)=>{
                        return ( <div className="userlist-tr" key={item.id}>
                        <div className="userlist-item">{item.username}</div>
                        <div className="userlist-item">{item.userage}</div>
                        <div className="userlist-item">删除</div>
                    </div>)

                    })}
                  
            </div>
        )
    }
}

5:新增用户界面

import React, { Component } from 'react'
import   store  from  "../store";

export default class UserAdd extends Component {
    render() {
        return (
            <div>
                新增用户
                用户名<input ref="username"/>
                年龄<input ref="userage"/>
                <button onClick={()=>{
                    let  username  = this.refs.username.value;
                    let  userage  = this.refs.userage.value;
                    let  id = store.getState().userInfo.list.length+1;
                    //如果有链接的数据库  直接生成id

                    
                    store.dispatch({
                        type:"add",
                        playload:{
                            id,username,userage
                        }
                    })

                }}>新增</button>
            </div>
        )
    }
}

6:修改userReducer

let   initState = { //初始化数据
    list:[{
        id:1,username:"leson",userage:18
    }]
}

let   userReducer =(state=initState,action)=>{
    switch(action.type){
        case  "add":
            return  {
                list:[...state.list,action.playload]
            }

    }

    return  state;
}

export default  userReducer;

7:分离

常量

action/index.js中

export  default {
    "ADDNUM":"ADDNUM",
    "REDUCENUM":"REDUCENUM",
    "ADDUSER":"ADDUSER"
}

对象 

action/userAction.js中

import   actionType  from  "./index";

let  add = (playload)=>{
    return {
        type:actionType.ADDUSER,
        playload
    }
}

export  {
    add
}

 

reducer/userReducer.js

import   actionType from  "../action"
let   initState = { //初始化数据
    list:[{
        id:1,username:"leson",userage:18
    }]
}

let   userReducer =(state=initState,action)=>{
    switch(action.type){
        case  actionType.ADDUSER:
            return  {
                list:[...state.list,action.playload]
            }

    }

    return  state;
}

export default  userReducer;

 

add的页面中  修改dispatch的调用

import React, { Component } from 'react'
import   store  from  "../store";
import   {add} from  "../action/userAction"

export default class UserAdd extends Component {
    render() {
        return (
            <div>
                新增用户
                用户名<input ref="username"/>
                年龄<input ref="userage"/>
                <button onClick={()=>{
                    let  username  = this.refs.username.value;
                    let  userage  = this.refs.userage.value;
                    let  id = store.getState().userInfo.list.length+1;
                    //如果有链接的数据库  直接生成id
                    store.dispatch(add({id,username,userage}));

                }}>新增</button>
            </div>
        )
    }
}

 

在新增一个删除和数据初始化

action/index.js中 

export  default {
    "ADDNUM":"ADDNUM",
    "REDUCENUM":"REDUCENUM",
    "ADDUSER":"ADDUSER",
    "DELETEUSER":"DELETEUSER",
    "INITUSER":"INITUSER"
}

 

action/userAction.js中

import   actionType  from  "./index";

let  add = (playload)=>{
    return {
        type:actionType.ADDUSER,
        playload
    }
}
let  del  = (playload)=>{
    return  {
        type:actionType.DELETEUSER,
        playload
    }
}
let  init  =(playload)=>{
    return  {
        type:actionType.INITUSER,
        playload
    }
}

export  {
    add,
    del,
    init
}

reducer/userReducer.js中

import   actionType from  "../action"
let   initState = { //初始化数据
    list:[]
}

let   userReducer =(state=initState,action)=>{
    switch(action.type){
        case  actionType.ADDUSER:
            return  {
                list:[...state.list,action.playload],//对象
            }
        case  actionType.DELETEUSER:
            return {
                list:state.list.filter(item=>item.id!=action.playload)//id
            }
        case   actionType.INITUSER:
            return {
                list:action.playload //集合
            }
    }
    return  state;
}

export default  userReducer;

在页面调用和使用

import React, { Component } from 'react'
import  "../css/user.css";
import   store from  "../store";
import  {del,init} from  "../action/userAction"

export default class UserList extends Component {
    constructor(props){
        super(props);
        // console.log(store.getState());
    }

    componentDidMount(){

        let  list  = [{id:1,username:"leson",userage:18},{id:2,username:"lulu",userage:19}]
        store.dispatch(init(list));
        this.forceUpdate();

    }

    render() {

        return (
            <div className="userlist">
                    <div className="userlist-header">
                        <div className="userlist-item">姓名</div>
                        <div className="userlist-item">年龄</div>
                        <div className="userlist-item">操作</div>
                    </div>

                    {store.getState().userInfo.list.map((item)=>{
                        return ( <div className="userlist-tr" key={item.id}>
                        <div className="userlist-item">{item.username}</div>
                        <div className="userlist-item">{item.userage}</div>
                        <div className="userlist-item" onClick={
                            ()=>{
                               store.dispatch(del(item.id));
                               this.forceUpdate();
                            }
                        }>删除</div>
                    </div>)

                    })}
                  
            </div>
        )
    }
}