react redux通过输入框获取数据并添加

前景提要

• 如果您对redux 不了解 ------ 点击此处
• 如果您对redux 如何渲染到页面不了解 ------ 点击此处
• 本文是在您已经了解如何渲染到页面的前提下进行的
• 没有使用 react-redux 工具

  

视图层展示：

• 希望实现的效果：通过 回车键向 store 中添加数据并实时渲染出来

1. 视图层发起请求

//父页面下的子页面，这里只是一个 input 框，数据展示在另一个子组件里面
import React, { Component } from 'react'
import actionCreators from "../../store/actionCreators"   //在这里面是书写的 action 方法
export default class TodoInput extends Component {
    handleKeyUp = (e)=>{
        if(e.keyCode === 13){  //如果是回车键的话
            //接下来需要更改redux状态   
            actionCreators.addNewTodo(e.target.value)   //调用actionCreators 里面的方法并传参
            e.target.value = ""  //回车以后清空输入框内内容
        }
    }
    render() {
        return (
            <input onKeyUp={this.handleKeyUp}/>
        )
    }
}

           

1. actionCreators 收到请求，正式向 store 发送请求

//store/actionType-------------------------
//定义一个常量
const ADD_NEW_TODO  = "ADD_NEW_TODO"
export {
    ADD_NEW_TODO,
}
           

//store/actionCreators-------------------------
import store from "../store"
import {ADD_NEW_TODO} from "./actionType"  //类型的话如果可以请传递一个常量
export default {
    addNewTodo(title){ //actionCreators 被调用的函数  //title 接收到传递过过来的参数
        let action = {
            type:ADD_NEW_TODO,
            title
        }
        //需要将action派发给reducer进行处理 ，并传递上述参数
        store.dispatch(action)  
    },

}
           

1. reducer 接收到请求，开始对参数动手

//store/reducer
import {ADD_NEW_TODO} from "./actionType"   //引入变量，用来对比你传来的是什么类型的
let state = {
    todos:[
        {
            id:1,
            title:"今天周一",
        },
        {
            id:2,
            title:"今天周二",
        }
    ]
}

//需要定义成一个纯函数
const reducer = (prevState = state,action)=>{   //设置默认的数据（如果没有传递给参数的话）
    let newState = {...prevState}  //将数据赋值给一个新的变量，这样就不会改变之前的值，造成其他影响
    switch(action.type){           //通过传递过来的 action 的参数类型（常量）来进行比较
        case ADD_NEW_TODO:         //如果是 ADD_NEW_TODO
             newState.todos.push({id:handler.getId(newState.todos),title:action.title})
            break;   //调用函数并将获取到的数据添加到现在的数据里面
        default :
            break;
    }
    return newState   //返回新的数据给 store //关键 ⬅⬅⬅⬅⬅⬅
}
const handler = {
    getId(todos){
        return ... ...
    }
}
export default  reducer
           

1. store 接收到参数，并不会有任何表现，你直接用就行了

import { createStore } from 'redux';
import reducer from "./reducer"
const store = createStore(reducer); //store是唯一数据源  且需要reducer的辅助才可以创建
export default store
           

1. 视图层 接收改动后的数据并展示出来

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

export default class TodoContent extends Component {
    constructor(){
        super()
        this.state = {
            todos:[]  //这是之前定义的数据，会被替换
        }
    }

    setTodos = ()=>{
        this.setState({ //⬇⬇⬇⬇⬇⬇
            todos:store.getState().todos   //将store 内的数据赋值给 本页面的数据 state
                        				   //但是你数据改变的时候并不会调用
            							   //此时你需要再次调用才行
        })
    }

    componentDidMount(){
        this.setTodos()    //第一次渲染的时候调用
        //订阅redux状态的变化
        store.subscribe(()=>{ //数据变动自动调用  ⬅⬅⬅⬅⬅⬅⬅
            this.setTodos()
        })
    }
    render() {
        return (
            <ul>
                {
                   this.state.todos.map(item=>{  //此处是渲染数据
                    ... ...
                })
                }
            </ul>
        )
    }
}

           

注意事项：

• 如果你想复制代码，请仔细查看 组件名，具体功能未完善，请根据自己需求书写。
• 如有疑问请评论区发表看法