Redux入门开发步骤(一)

最新推荐文章于 2023-12-13 09:59:04 发布

原创最新推荐文章于 2023-12-13 09:59:04 发布 · 219 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Redux入门开发步骤

React入门案例专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了如何使用create-react-app创建Redux项目，包括配置redux依赖、项目目录结构设计及组件与reducers的联通方式，帮助初学者快速掌握Redux开发流程。

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

导入命令创建redux项目和配置redux依赖

create-react-app todoredux2

cd todoredux2

code .

cnpm install react-redux 

cnpm install redux

使用cnpm 安装不用npm安装 :

cnpm是国内镜像,和npm安装依赖的库是一样的 ,安装速度上很快

建立目录

actions(现在是空文件夹)

containers (现在是空文件夹)

components------Footer.js

reducers---------index.js(组装响应组件渲染给页面的)

项目结构删除了些没用的css样式和图标

Footer.js

import React, { Component } from 'react'

class Footer extends Component {
  render() {
    return (
      <div>
        <span>Show: </span>
      </div>
    )
  }
}
export default Footer;

reducers/index.js

import { combineReducers } from 'redux';

export default combineReducers({
    
});

App.js

import React, { Component } from 'react';
import Footer from './components/Footer';

import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer)

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <div >
          <Footer/>
        </div>
      </Provider>
    );
  }
}

export default App;

对App.js文件做改动创建了商店(store)用于存储状态

使用<Provider>标签包裹此为Redux 固定写法

<Provider store={store}>
        <div >
          <Footer/>
            ...
        </div>
      </Provider>

只要(组件)和reducers响应和App.js文件联通即可显示上述页面

Redux入门开发步骤