使用react-redux实现todolist的增删改

最新推荐文章于 2023-10-09 08:00:00 发布

Two horses

最新推荐文章于 2023-10-09 08:00:00 发布

阅读量389

点赞数

本文链接：https://blog.csdn.net/TwoHooooo/article/details/104487528

版权

本文档指导如何使用react-redux创建一个todolist应用。首先通过npm创建react项目，然后安装react-redux。接着建立store来处理数据传输，接着在src目录下创建组件，包括actionCreator和reducer。最后，实现todolist的增删改功能，具体涉及actionCreator的编写、组件的渲染及事件绑定，以及reducer的处理逻辑。

摘要由CSDN通过智能技术生成

1.创建一个react项目

(1).npm i create-react-app -g
(2).create-react-app xxx(项目名称)
(3).cd xxx
(4.).npm start
启动项目后会浏览器会自动打开页面
出现react的标志即为打开成功

2.安装react-redux

运行npm i redux react-redux --save-dev

3.建立store用于数据传输

在App.js文件中引入
import {Provider} from ‘react-redux’
import store from ‘./store’

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();

并使用将包裹起来

在store文件中建立总的reducer文件

4.在src中建立组件

1.在src中建立todos文件，其中分别建立actionCreator文件用来书写行为代码以及tdos的单独reducer文件
2.在store文件的index.js文件中引入

import {
   createStore} from 'redux';
import reducer from './reducer'

var store =createStore(reducer);

最低0.47元/天解锁文章