React-Redux实现极其简易的Todolist

为了学习React-Redux 基本用法

Redux官网

之前看过一次 云里雾里 也是难点

视图层框架 React 其实看完之后才觉得 如果对业务逻辑特别清楚 写Redux还是很清楚的
所以 需要数据层框架 Redux 可以把Redux理解成 "物流分发点" Redux = > Reducer + flux

  1. Web 应用是一个状态机 视图跟状态是一一对应的 2.所有状态 保存在一个对象里
    ——阮一峰大佬 解释Redux就是两句话
  • Redux工作流程
Redux workflow
UI组件与容器组件的拆分

UI渲染
容器逻辑
无状态组件 - 组件只有一个render函数的时候 替换成函数即可 性能较高 比如商品展示 只是数据展示类的组件 都可以定义成无状态组件

Redux里发送axios流程

引入axios
在生命周期componentDidmount里写请求

redux-thunk 中间件 发送axios

Redux-saga 中间件的试用

中间件处理异步处理

yarn add redux-saga

generator函数 ES6
sagas 必须是generrator函数

sagas.js 里暴露出去的必须是generator function

saga平时要用的api特别多

action跟store之间 给dispatch方法升级

React-Redux

方便在React里用Redux

这一节收益较大

核心

  • Provider 组件
    store提供给内部组件 提供器
  • connect方法 接受三个参数
    前两个参数是连接规则
    第一个参数是store里的数据跟组件的关系
    第二个参数是 组件props 如何更改store数据 如何跟store的dispatch方法做关联
代码如下
  • index.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    import Todolist from './Todolist';
    
    //使用react-redux
    import {Provider} from 'react-redux'
    import store from './store/index'
    
    // provider 把store传给了 provider里面的所有标签  连接store
    const name = 'AILI 艾力'
    const App = (
        <Provider store={store}>   
            <Todolist title={name} />
        </Provider>
    )
    
    ReactDOM.render(App,document.getElementById('root'));
    
  • Todolist.js

    import React,{ Component } from 'react';
    import { connect } from 'react-redux'
    
    
    class Todolist extends Component {
    
    
    
        // 疑问一 怎么获取todolist的父组件传来的值
        
        // constructor(props){
        //     super(props)
        //     console.log(props)
        //     const newName = props.title
        //     this.setState({
        //         title:newName
        //     })
        // }
    
    
    
    
    
    
        render() {
            return (
                <div>
    
                    <div>
                        <h1>Hello World!!!</h1>
    
                        <input 
                            value={this.props.inputValue}
                            onChange={this.props.ChangeInput}
                        />
                        <button onClick={this.props.handleSubmit}>提交</button>
                    </div>
    
                    <ul>
                        {this.props.list.map(
                            (item,index)=>{
                                return <li key={index}>
                                    {item}
                                </li>
                            }
                        )}
                    
                    </ul>
    
                </div>
            )   
        }
    }
    
    
    // 定义映射关系   把store的数据    用props父子组件传值的方式传给todolist
    const mapStateToProps = (state)=>{
        console.log(state)
        return {
            inputValue : state.inputValue,
            list : state.list
        }
        
    }
    
    // store.dispatch 挂载到props上  改变store的内容 必须触发dispatch
    const mapDispatchToprops = (dispatch) =>{
        return {
            ChangeInput(e){
                const action = {
                    type:'change_input_value',
                    value:e.target.value
                }
                // console.log(e.target.value)
                dispatch(action)
            },
    
    
    
            handleSubmit(){
                const action = {
                    type:'add_item'
                }
                dispatch(action)
            }
        }
    }
    
    
    
    // connect 方法就是让todolist跟store做连接
    export default connect(mapStateToProps,mapDispatchToprops)(Todolist)
    
  • store.js

    import {createStore} from 'redux';
    import reducer from './reducer'
    
    const store = createStore(reducer)
    
    export default store
    
    
    
  • reducer.js

    const defaultState = {
        inputValue:'',
        list:[]
    }
    
    export default (state=defaultState,actions)=>{
        console.log(state,actions)
    
        if (actions.type === 'change_input_value'){
            //做一个深拷贝
            const newState = JSON.parse(JSON.stringify(state))
            newState.inputValue = actions.value
    
            return newState
        }
    
    
        if (actions.type === 'add_item'){
            //做一个深拷贝
            const newState = JSON.parse(JSON.stringify(state))
            newState.list.push(newState.inputValue)
            newState.inputValue = ''
            return newState
        }
        return state
    }
    

学习相关链接

React小书 - 动手实现react-redux学习原理的同学可以看看

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容