react-redux 和store的应用

  react-redux是react官方用来绑定redux的，将Provider放在最上层让redux的store在任何组件里都是可用的。

然后使用connect()函数来链接react的组件和redux的store

安装         

npm  install  react-router-dom --save   路由

  npm i redux --save              npm  i  react-redux

react-redux 

• 使用 react-redux 模块，解构 Provider
  • Provider 是一个组件
  • 使用 Provider 包裹根组件
• 组件内使用 connect 函数，必须是根组件被 Provider 组件包裹
• 引入 store 模块，以 store 属性的方式通过 Provider 组件向下传
• Redux 应用只有一个单一的 store.当需要拆分数据处理逻辑时，你应该使用 reducer 组合而不是创建多个 store。

store

• 维持应用的 state；
• 提供 getState() 方法获取 state；
• 提供 dispatch(action) 方法更新 state；
• 通过 subscribe(listener) 注册监听器;
• 通过 subscribe(listener) 返回的函数注销监听器。

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

/*
* react-redux 模块必须依赖于 redux 模块
* react-redux 是一个 redux 模块的一个优化
* */
// 引入 react-redux 模块内的 Provider 组件
import {Provider} from 'react-redux'
// 引入 store
import store from "./store/store";

/*
* 通过 react-redux 里的提供器，将 store 对象注册到根组件的上下文
* 将组件挂载
* 组件内使用 connect 函数，必须是根组件被 Provider 组件包裹
* */
ReactDOM.render(
    <Provider store={store}>
       <App/>
    </Provider>,document.getElementById('root'));

serviceWorker.unregister();

 

    one组件里的增删改查

在store的index.js中建立仓库 reducer

 

在store下的reducer中引入组件的reducer （总的reducer）

在work下的 组件one.js 里

在work下的actionCreater.js 中

在work 下的 one组件的reducer.js (one组件中的方法和数据)