• react-redux 的基本使用


    1、在src下创建redux文件夹,并新建store.js

    // store.js
    import { createStore } from 'redux';
    import reducers from './reducers/index';
    export default createStore(reducers);
    

    2、接着在redux文件下创建reducers文件夹,并新建index.js

    //index.js
    //combineReducers方法,用于 Reducer 的拆分,便于以后添加其他函数
    import { combineReducers } from "redux";
    import { todo } from "./todo.js";
    
    export default combineReducers({
      todo
    });
    
    //todo.js
    //只做了对数组增和删两个操作
    const initialState = {
      list:[]
    }
    export function todo(state = initialState, action){
      if(action.type==="ADD_TODO"){
        let newState = JSON.parse(JSON.stringify(state));
        newState.list.push({
          content:action.payload
        });
        return newState;
      }else if(action.type==="DEL_TODO"){
        let newState = JSON.parse(JSON.stringify(state));
        newState.list.splice(action.payload, 1);
        return newState;
      }else{
        return state;
      }
    }
    

    3、接着去项目的index.js文件,使用Provider组件

    //index.js
    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import reportWebVitals from './reportWebVitals';
    
    //引入相关文件,并对根组件进行包裹,传入store
    //这样一来,App的所有子组件就默认都可以拿到state了
    import { Provider } from "react-redux";
    import store from "./redux/store";
    
    
    ReactDOM.render(
      <Provider store={store}>
        <React.StrictMode>
          <App />
        </React.StrictMode>
      </Provider>,
      document.getElementById('root')
    );
    reportWebVitals();
    

    4、组件里使用store

    //todoList.jsx
    import React, { Component } from 'react';
    //1、引入connect
    import { connect } from 'react-redux'
    
    class TodoList extends Component {
      handleDelete(index){
        this.props.deleteTodo(index);
      }
      render() {
        return (
          <div>
            <ul>
              {
                this.props.list.map((item,index)=>{
                  return (
                    <li key={index}>
                      <span>{item.content}</span>
                      <button onClick={this.handleDelete.bind(this,index)}>x</button>
                    </li>
                  )
                })
              }
            </ul>
          </div>
        )
      }
    }
    
    //2、把state里的数据映射到props里,可以通过Props使用
    const mapStateToProps = (state) =>{
      return {
        list:state.todo.list
      }
    }
    //3、把action里的方法绑定到props上,可以通过Props使用,用于修改store里的数据
    const mapDispatchToProps =(dispatch)=>{
      return {
        deleteTodo(index){
          dispatch({
            type:"DEL_TODO",
            payload:index
          })
        }
      }
    }
    
    //4、connect方法接受两个参数:mapStateToProps和mapDispatchToProps,没有则传null
    export default connect(mapStateToProps,mapDispatchToProps)(TodoList);
    
  • 相关阅读:
    观察者模式
    盛最多水的容器
    单例模式
    (七)STL适配器
    (六)STL仿函数functor
    (五)STL算法
    吴恩达《机器学习》课程总结(3)_线性代数回顾
    吴恩达《机器学习》课程总结(2)_单变量线性回归
    吴恩达《机器学习》课程总结(1)_绪论:初识机器学习
    图像表示与描述
  • 原文地址:https://www.cnblogs.com/sgs123/p/14077698.html
Copyright © 2020-2023  润新知