react,reudx踩坑系列

最新推荐文章于 2023-08-19 20:32:32 发布

悠悠啊

最新推荐文章于 2023-08-19 20:32:32 发布

阅读量290

点赞数 1

CC 4.0 BY-SA版权

分类专栏：学习总结文章标签： react redux connent thunk delete

本文链接：https://blog.youkuaiyun.com/weixin_41780596/article/details/84935414

学习总结专栏收录该内容

7 篇文章

订阅专栏

本文探讨了Antd库中Input组件的正确使用方法，包括如何通过refs获取组件值，以及在Redux中避免直接修改状态，确保组件响应store变化。同时，介绍了Redux的基本概念和常用API。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. refs特定标识，可以理解成id；

问题：引入antd的Input组件，无法通过this.refs.myinput.value获取到value值。

阐述如下：

// 普通html
<input ref="myinput"/>
this.myinput //获取的是input的dom节点
value = this.myinput.value //此时就可以获取value值



// Input组件， 从antd中引入
<Input ref = 'inputComponent' />
this.inputComponent //获取的是Input组件
console.log(this.inputComponent) //发现input节点就是该对象的一个属性
value = this.inputComponent.input.value //所以要先找到input节点，才可以获取value值

2. 问题： store变化,UI组件没有重新渲染

原因： reducer里直接改变了state；reducer里不能直接改变state,reducer只能是纯函数

注意：函数的传参，如果参数不是对象或数组，改变形参不会影响实参；

如果传入的是数组，对象，本质上是传入的指向该对象，数组的指针，所以在函数里改变形参，会改变原实参

// 容器组件 todolist.js
import { delTodos } from '../redux/action/actionCreators';
import TodoList from '../components/TodoList';
import { connect } from 'react-redux';

const mapStateToProps = (state) =>  ({ 
    todos: state
});
const mapDispatchToProps = dispatch => ({
    delTodo: id => dispatch(delTodos(id))
});
export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

// reducer.js

import { ADD_TODOS, DEL_TODOS, INITIAL_STATE } from '../action/actionTypes';

 const todos = (state = [], action) => {
    switch(action.type){
        case ADD_TODOS: return [ ...state, { id: action.id, text: action.text}];
        case INITIAL_STATE: return action.data;
        case DEL_TODOS:  state = delTodos(state, action.id); return state;
        default: return state;
    }
}

const delTodos = (state, id) => {
    let indexs;
    // 不能修改原来的state,reducer只能是纯函数
    let newState = JSON.parse(JSON.stringify(state))
    newState.map((item, index) => {
        if(item.id === id){
           indexs = index; 
        }
    })
    newState.splice(indexs, 1);
    return newState;
}
export default todos;

3. 关于redux

（1）redux： createStore, applyMiddleware(打印，报错，异步处理)， compose(合成多个函数，返回一个函数)， combineReducers(合成多个reducer), bindActionCreators

（2）react-redux： connect (连接组件和store)

（3）redux-thunk： thunk(异步操作，dispatch不仅可以传递对象，还可以是函数)

4. js中的delete属性

delete state.name; 删除对象的属性