react-redux 改todoList

最新推荐文章于 2022-03-17 21:22:51 发布

honghong.zhou

最新推荐文章于 2022-03-17 21:22:51 发布

阅读量214

点赞数

CC 4.0 BY-SA版权

分类专栏： react-js

本文链接：https://blog.csdn.net/chengQunBin/article/details/104925310

react-js 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了一个使用React和Redux构建的应用案例，包括组件状态管理、store集成、action创建及dispatch流程。通过具体代码示例，展示了如何在React项目中引入Redux进行状态集中管理，实现组件间的数据共享。

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

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Provider }  from 'react-redux'
import store from './store'


ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>
    , document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

import React, { Component } from 'react'
import './App.css'
import ListItem from './DelItem'
import { inputChange,addTo, delItem, initList, getTodoList} from './actions'
import { connect } from 'react-redux'
class A extends Component {
    constructor (props) {
        super(props)
        this.add = this.add.bind(this)
    }
    add () {
        this.props.add (this.props.inputVal)
    }
    render () {
        const { todos, inputVal } = this.props
        return (
            <div className='box'>
                <div>
                    <input style={{border: '1px solid #000'}} onChange={this.props.changeInputVal} value={inputVal}/>
                    <button onClick={() =>this.props.add(inputVal)}>添加</button>
                </div>
                {
                    todos.map((todo,i) => (<ListItem key={todo.id} {...todo} delItem={() =>this.delItem(i)}></ListItem>))
                }
            </div>
        )
    }
}
const mapStateToProps = (state) => {
    return {
        todos: state.todos,
        inputVal: state.inputVal
    }
}
const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        changeInputVal (e) {
            const action = inputChange(e.target.value)
            dispatch(action)
        },
        add (inputVal) {
            const action = addTo(inputVal)
            dispatch(action)
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(A)