!
也想出现在这里? 联系我们
广告位
当前位置:首页>开发>其他开发实例>react使用react-redux

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:

react使用react-redux

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;
}

给TA打赏
共{{data.count}}人
人已打赏
其他开发实例

react使用styled-components做css的私有化

2022-9-28 20:41:22

其他开发实例

react生命周期总结

2022-9-29 20:40:23

声明 本站上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。无意侵害您的权益,请发送邮件至 [email protected] 或点击右侧 私信:林沐阳 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索