Redux入门开发步骤(一)

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35812380/article/details/83118037

导入命令创建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入门开发步骤