react使用react-redux

1：安装

npm i redux
npm i react-redux

2：配置index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import TodoList from './todo_list/TodoList';
import store from './store';
import { Provider } from 'react-redux';

const App = () => (
  <Provider store={store}>
    <TodoList  />
  </Provider>
)

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
   // 严格模式：控制台会出现调用两次问题
   // 严格模式检查只在开发模式下运行，不会与生产模式冲突。
  // <React.StrictMode><TodoList /></React.StrictMode>
  <App  />
);

3：根目录新建store目录，创建index.js和reducer.js

index.js

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

reducer.js

const defaultState = {
    inputVal: '',
    list: []
}
// reducer 可以接收state，但是绝对不能修改state
export default (state = defaultState, action) => {
    if(action.type === 'change_input_val'){
        let newState = JSON.parse(JSON.stringify(state));
        newState.inputVal = action.value;
        console.log(newState);
        return newState;
    }
    if(action.type === 'submit_input'){
        let newState = JSON.parse(JSON.stringify(state));
        newState.list.push(newState.inputVal)
        newState.inputVal = '';
        console.log(newState);
        return newState;
    }
    if(action.type === 'submit_delect_item'){
        let newState = JSON.parse(JSON.stringify(state));
        newState.list.splice(action.index, 1);
        return newState;
    }
    return state;
}

组件中使用：

DEMO-todolist:

TodoList.js

import { Component, Fragment } from "react";
import TodoItem from "./TodoItem";
import './TodoList.css'
import { connect } from 'react-redux';

class TodoList extends Component{
  render() {
    return (
      <Fragment>
        <div className="input-box">
          <label htmlFor="inputId">输入框聚焦</label>
          <input 
            id="inputId"
            value={this.props.inputVal} 
            onChange={this.props.headleInputChange}/> 
          <button onClick={this.props.headleButtonClick}>提交</button>
        </div>
        <ul className="todo-ul">
          { this.getTodoItem() }
        </ul>
      </Fragment>
    )
  }
  // 获取数组dom
  getTodoItem(){
    return this.props.list.map((item, index) => {
      return (
        <TodoItem 
          key={index} 
          index={index} 
          content={item} 
          delItemClick={this.props.delItemClick} />
      )
    })
  }
}

const mapStateToProps = (state) =>{
  return {
      inputVal: state.inputVal,
      list: state.list
  }
}
const mapDispatchToProps = (dispatch) =>{
  return {
    // 输入框监听改变
    headleInputChange(e){
      const action = {
        type: 'change_input_val',
        value: e.target.value
      }
      dispatch(action)
    },
    // 点击提交按钮
    headleButtonClick(){
      const action = {
        type: 'submit_input'
      }
      dispatch(action);
    },
    // 删除列表项
    delItemClick(index){
      const action = {
        type: 'submit_delect_item',
        index: index
      }
      dispatch(action)
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

TodoItem.js

import { Component } from "react";
import { PropTypes } from 'prop-types'

class TodoItem extends Component{
    constructor(props){
        super(props)
        this.sonItemClick = this.sonItemClick.bind(this);
    }
    render(){
        const { content } = this.props;
        return <li onClick={this.sonItemClick}>{content}</li>
    }
    sonItemClick(){
        let {delItemClick, index} = this.props;
        delItemClick(index)
    }
}
// 设置props传入的数据格式
TodoItem.propTypes = {
    content: PropTypes.string.isRequired,
    delItemClick: PropTypes.func,
    index: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
}
//父组件未传参时设置默认值
TodoItem.defaultProps = {
    content: '默认值'
}
export default TodoItem;

TodoList.css

.input-box{
    display: flex;
    align-items: center;
}
.input-box label{
    cursor: pointer;
}
.input-box input,
.input-box button{
    box-sizing: border-box;
    border:  1px solid #ccc;
    height: 30px;
}
.input-box button{
    cursor: pointer;
}
.todo-ul li{
    cursor: pointer;
}