108.《Redux的详细使用(案例)》

2021-07-24 23:29:34 阅读：179 来源： 互联网

标签：index ITEM newstate 案例 108 action import Redux store

Redux是一个用来管理管理数据状态和UI状态的JavaScript应用工具。随着JavaScript单页应用（SPA）开发日趋复杂，JavaScript需要管理比任何时候都要多的state（状态），Redux就是降低管理难度的。（Redux支持React，Angular、jQuery甚至纯JavaScript）

按照下面的项目结构，创建项目，并把代码复制进去，就可以呈现出利用Redux管理数据的react案例

案例图片

请添加图片描述

当我们在文本框输入内容，点击确定就会进行追加

请添加图片描述

项目结构图解

在这里插入图片描述

所需安装的依赖

cnpm i antd redux --axios

App.js

在根组件中写组件

import React, { Component } from 'react'
import { List, Button, Input } from 'antd';
import store from "./store/index";

import { changeinp, AddItem, DelItem } from "./store/actionManger";

export default class App extends Component {
    constructor(props) {
        super(props)
        this.storeChange = this.storeChange.bind(this)
        this.state = store.getState()
        store.subscribe(this.storeChange) // 发布
    }
    // 订阅
    storeChange() {
        this.setState(store.getState())
    }
    // 监听文本框的值  
    onChangeInput(e) {
        let action = changeinp(e.target.value)
        store.dispatch(action)
    }
    // 添加
    clickBtn() {
        let action = AddItem()
        store.dispatch(action)
    }
    // 单机每一项删除
    del(index) {
        let action = DelItem(index)
        store.dispatch(action)
    }
    render() {
        return (
            <div className="wrap">
                <h1>Redux的详细使用(案例)</h1>
                <h1>极度封装</h1>
                <div className="wrapContent">
                    <Input style={{ width: "300px", margin: "30px" }}
                        onChange={this.onChangeInput}
                        placeholder={this.state.inputValue}
                        value={this.state.inputValue}
                        size="large"
                    />
                    <Button type="primary"  size="large" onClick={this.clickBtn}>增加</Button>
                    <div style={{ width: "400px", marginLeft: "30px" }}>
                        <List
                            bordered
                            dataSource={this.state.list}
                            renderItem={(item, index) => (
                                <List.Item onClick={() => { this.del(index) }}>
                                    {item}
                                </List.Item>
                            )} />
                    </div>
                    <p>点击每一项可删除</p>
                </div>
            </div>
        )
    }
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';  
import 'antd/dist/antd.css';
import "./App.css";
import App from "./App"; 

ReactDOM.render(<App/>, document.getElementById("root"))

App.css

.wrap{
    height: 100vh;
    background-color: red;
    overflow: hidden;
}
.wrapContent{
width: 500px;
background-color: #ccc;
margin: 10px auto;
padding-bottom: 20px;
}
.ant-list {
    background-color: #fff; 
}
h1{
    text-align: center;
    font-size: 50px;
    color: #fff;
}
p{
    text-align: center;
    color: red;
    font-weight: 1000;
    font-size: 20px;
    margin-top: 10px;
}

index文件夹下的 index.css

.bg{
    background-color: aqua;
    text-align: center;
}

.wrap{
    width: 500px;   
    text-align: center;
    background-color: bisque;
    border: 2px solid black !important;
}
.input{
    width: 400px;
}
.textarea{
    width: 400px; 
    height: 300px;
    margin-top: 10px;
}
.commentContent{ 
    text-align: initial;
    padding: 20px 50px; 
}

store文件夹 > index.js

  
import { createStore } from "redux";
import reducer from "./reducer";
let store = createStore(
    reducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
export default store

store文件夹 > reducer.js

import { ADD_ITEM,DEL_ITEM ,INPUT_VALUE} from "./actionType";
const defaultState = {
    type:"inputValue",
    list : [
        "11111111111111111",
        "22222222222222222",
        "33333333333333333"
    ]
} 
const reducer = ( state = defaultState,action )=>{ 
    // 文本
    if( action.type === INPUT_VALUE ){
        let newstate = JSON.parse(JSON.stringify(state))
        newstate.inputValue = action.value
        return newstate
    } 
    // 添加
    if( action.type === ADD_ITEM ){
        let newstate = JSON.parse(JSON.stringify(state)) 
        if(newstate.inputValue)
        newstate.list.push(newstate.inputValue)  
        newstate.inputValue = ''
        return newstate
    }
    // 删除
    if( action.type === DEL_ITEM ){
        let newstate = JSON.parse(JSON.stringify(state)) 
        let index = action.index
        newstate.list.splice(index,1)
        return newstate
    }
    return state
}
export default reducer

store文件夹 > actionType.js

export const ADD_ITEM = "addItem"
export const DEL_ITEM = "delItem"
export const INPUT_VALUE = "inputValue"

store文件夹 > actionManger.js

import { INPUT_VALUE,ADD_ITEM , DEL_ITEM } from "./actionType";

export const changeinp = (value) => (
    {
        type: INPUT_VALUE,
        value
    }
)

export const AddItem = () => (
    {
        type: ADD_ITEM 
    }
)

export const DelItem = (index) => (
    {
        type: DEL_ITEM,
        index 
    }
)

标签：index,ITEM,newstate,案例,108,action,import,Redux,store
来源： https://blog.csdn.net/qq_44864082/article/details/119065653

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9