redux 与 react-redux 的结合使用

上篇文章我们聊到在react中如何简单的使用redux，那么今天我们就来看一下在“干活的时候”我们是怎样运用redux的。

1. 相信很多小伙伴不难看出当我们单独去使用redux的时候虽然有章可循,是在所有使用到的组件中我们都要去导入store,那么有没有什么方法可以不这样做呢？答案是有的。
2. 我们可以依靠react的context去自己写一个Provider将其包裹在外层文件中,那么被包裹的所有组件在使用store里面的状态的时候都可以访问到而且不用每次都导入store。
3. 当然在现在社会中凡事都讲究效率,很多我们以前需要自己动手去写的东西现在都有现成的插件来代替,而且不得不说啊,一些插件的效率还是相当高的。例如react-redux就帮助我们完成了上述我们所要做的工作。
4. 那具体怎样使用呢,我将在下面进行演示。

先使用命令行工具安装redux和react-redux

1. npm install redux react-redux --save
2. 还是先创建仓库store:

import {createStore} from 'redux'
import rootReducer from "../reducer";   // 后续创建
export default function configStore() {
  const store = createStore(rootReducer);
    return store;
}

3. 这里还以计数器的为例我们先创建一个放置常量的文件夹:

export const INCREMENT = 'INCREMENT'
export const DECREMENT = 'DECREMENT'

4. action:

import * as countActions from '常量文件路径'
export default {  
       increment(){
	     return{
		type:'countActions.INCREMENT'
	    }
	}，  
      decrement(){
            return{
               type:'countActions.INCREMENT'
     }
            }
}

5. reducer:

import * as countActions from '常量文件路径'
const initialState = {count:0}
export default function counter(state=initialState,action){ 
      switch(action.type){
	case countActions.INCREMENT:
	  return {...state,count:state.count+1}
	case countActions.DECREMENT:
	  return {...state,count:state.count-1}
	default:
	  return state
	 }
}

6. 如果你知道redux的基本使用以上所写相信你已经很熟悉了，接下来来看在项目中我们如何合并reducer:

import { combineReducers } from "redux";     // 合并的方法
import counter from "./counter";    // 一个reducer
const rootReducer = combineReducers({  counter}); // 多个reducer直接逗号接着写
export default rootReducer;

7. 接下来就是react-redux登场的时候了我们到入口文件中:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";  // 引入插件给你写好的Provider
import configstore from "./store/index"; // 我们先前自己写的store

const store = configstore();

ReactDOM.render(
  <Provider store={store}><App /></Provider>, // 使用标签形式包裹并将store以属性传递
  document.getElementById("root")
);

8. 做完这些工作你可以打开控制台看是否有报错，如果没有那么恭喜我们可以到需要获取状态的组件中去了:

import React, { Component } from "react";
import { connect } from "react-redux";  // 通过导入使用connect进行连接
import countActions from '路径'  // 我们的action

class DemoOne extends Component {
  render() {
      let { counter, increment,decrement } = this.props; //结构出来状态和方法
          return (
                <div>
                <button onClick={() => increment()}>inc</button>
                 {counter.count}
                <button onClick={() => decrement()}>dec</button>
                </div>
                 );
           }
 }
  export default connect(state => state, countActions)(DemoOne); // connect是一个高阶组件所以采用这种写法

9. 到此我们就使用react-redux和redux而且进行了模块化的分割实现了一个简单的功能。

很多人说啊，这并没有比先前单独使用redux方便到哪去。这个是对的，其实从代码量来看确实是，可是在我们组件化开发项目的时候，数据往往很多很多，那时候才会体现出这种集成合并模块化的使用好处，不仅方便维护管理而且比较清晰易懂。

redux比较适合中大型的项目，如果是小项目加上它那么多的模板代码显得则过于累赘，所以啊，大家不要执着于redux这一条路,比如我们的Mobx、官方Hook提供的useReducer和很多第三方的诸如stook 、Unstated等都可以更方便的提供类似功能，所以大家要放开眼光，多尝试新的东西，可能会更好。

那么redux和react-redux的使用就说到这里，后续为大家带来redux中处理异步问题的中间件使用，谢谢~ ~

———Counter War Class