React第七篇 React Redux

React 学习笔记

完整代码戳git

第一部分，腾讯课堂react入门课程
课程地址
React第一篇 npm、yarn介绍
React第二篇 React语法
React第三篇 单页应用开发
React第四篇 路由&Hooks
React第五篇 综合应用（登录+列表）

第二部分，Redux课程
课程地址
React第六篇 Redux
React第七篇 React Redux

1.项目搭建

• create-react-app 方式创建（我直接在src下新建了reactreduxdemo文件夹存放代码）
• 安装react-redux：yarn add react-redux --save 或 npm install --save react-redux
• 安装redux：yarn add redux --save 或 npm install --save redux

reactreduxdemo/reactreduxdemo.js

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

class TodoList2 extends Component {

    constructor(props){
        super(props)
        this.state = store.getState()
    }

    render() {
        return ( <div>
            <div>
                <input value={this.state.inputValue} />
                <button>提交</button>
            </div>
            <ul>
                <li>todolist</li>
            </ul>
        </div> );
    }
}
export default TodoList2;

reactreduxdemo/store/index.js

import {createStore} from 'redux'
import reducer from './reducer'

const store = createStore(reducer)

export default store

reactreduxdemo/store/reducer.js

const defalutState = {
    inputValue:'',
    placeHolder:'输入内容',
    list : [
        '早九点开晨会，分配任务',
        '中午12点吃饭',
        '中午12点半，睡觉',
        '中午1点半，起来下午工作'
    ]
}

export default (state = defalutState,action) =>{
    return state
}

2.Provider和connect

• src/index.js中引入Provider和store
• reactreduxdemo.js中引入connect

reactreduxdemo.js

import React, { Component } from 'react';
import './reactredux.scss'
import {connect} from "react-redux";

/**
 * @Description: react-redux学习
 * @author dongshuhuan
 * @date 2020-05-19
 */


class TodoList2 extends Component {

    constructor(props){
        super(props)
    }

    render() {
        return ( <div className={'container'}>
            <div>
                <input value={this.props.inputValue} onChange={this.props.inputChange} />
                <button onClick={this.props.addItem}>提交</button>
            </div>
            <ul>
                {
                    this.props.list.map((item,index)=>{return <li key={index} onClick={()=>this.props.deleteItem(index)}>{item}</li>})
                }
            </ul>
        </div> );
    }
}

//连接器映射关系
const stateToProps = (state) =>{
    return {
        inputValue:state.inputValue,
        list:state.list
    }
}

const dispatchToProps = (dispatch) =>{
    return {
        inputChange(e){
            let action = {
                type:'changeInput',
                value:e.target.value
            };
            dispatch(action)
        },
        addItem(){
            let action = {type:'addItem'};
            dispatch(action)
        },
        deleteItem(index){
            let action = {
                type:'deleteItem',
                value:index
            };
            dispatch(action)
        }
    }
}

export default connect(stateToProps,dispatchToProps)(TodoList2);

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import Router from "./router";
import ToDoList from "./reduxdemo/reduxdemo";
import store from "./reactreduxdemo/store";
import TodoList2 from "./reactreduxdemo/reactreduxdemo";
import {Provider} from 'react-redux'

//Router应用
// ReactDOM.render(
//   <React.StrictMode>
//     {/*  Router应用 */}
//     {/*<Router/>*/}
//   </React.StrictMode>,
//   document.getElementById('root')
// );

//redux 使用
// ReactDOM.render(
//     <React.StrictMode>
//         <ToDoList/>
//     </React.StrictMode>,
//     document.getElementById('root')
// );

//react-redux使用
// 声明一个App组件，然后这个组件用Provider进行包裹。
const App = (
    <Provider store={store}>
        <TodoList2 />
    </Provider>
)
ReactDOM.render(App, document.getElementById('root'));

serviceWorker.unregister();

reactreduxdemo/store/reducer.js

const defalutState = {
    inputValue:'',
    list : []
};

export default (state = defalutState,action) =>{
    if (action.type==='changeInput'){
        let newState = JSON.parse(JSON.stringify(state));
        newState.inputValue=action.value;
        return newState
    }
    if (action.type==='addItem'){
        let newState = JSON.parse(JSON.stringify(state));
        newState.list.push(newState.inputValue);
        newState.inputValue=''
        return newState
    }
    if (action.type==='deleteItem'){
        let newState = JSON.parse(JSON.stringify(state));
        newState.list.splice(action.value,1)
        return newState
    }
    return state
}

3.代码优化

• this.props 解构优化

class TodoList2 extends Component {

    render() {
        //this.props 解构优化
        let {inputValue ,inputChange,addItem,deleteItem,list} = this.props;
        return ( <div className={'container'}>
            <div>
                <input value={inputValue} onChange={inputChange} />
                <button onClick={addItem}>提交</button>
            </div>
            <ul>
                {
                    list.map((item,index)=>{return <li key={index} onClick={()=>deleteItem(index)}>{item}</li>})
                }
            </ul>
        </div> );
    }
}

• 将TodoList2改为无状态组件，提高性能

//改为无状态组件，提高性能
const TodoList2 =(props)=>{
    let {inputValue ,inputChange,addItem,deleteItem,list} = props;
    return ( <div className={'container'}>
        <div>
            <input value={inputValue} onChange={inputChange} />
            <button onClick={addItem}>提交</button>
        </div>
        <ul>
            {
                list.map((item,index)=>{return <li key={index} onClick={()=>deleteItem(index)}>{item}</li>})
            }
        </ul>
    </div> );
}

4.网页效果