React-Redux的一些基本用法

React作为两大比较通用的框架之一，如何实现页面组件的快速通信是一个重要的问题。下面，我将简单讲述一下React-Redux的使用方法。

创建store和reducer

首先我们需要创建store.js文件，并在其中进行reducer和store的创建。如下图：

我们不考虑combineReducers的情况，我们可以把所有的state写在prevState中，prevState用来记录旧的状态

我们就创建好了最基本的Reducer和store,将store导出即可

若想使用react-redux我们需要在index.js文件中将我们的入口文件(在本案例中为App.js)标签使用provider进行包裹，并提供刚才创建好的store在Provider标签上

使用state

我们使用函数式写法进行演示。首先我们需要使用connect将要使用state的组件包裹起来，以App.js为例:

connect有两个参数，第一个参数为记录state的函数。在这里我们使用reduxState进行命名。在使用时，reduxState这一函数的参数即为redux中的所有state,若我们想使用刚才在Reducer中创建的state,则直接返回一个对象，对象item的key值我们可以随便命名（但还是建议与Reducer中state名字命名一致），每一个key值对应的value为state下对应Reducer下的state值，因为我们这里只有一个Reducer,所以统一都为state.Reducer。例如，我们想使用c， 则直接state.Reudcer.c， 并将其对应key值也设置为c。之后我们将设置好的变量通过props传递进组件中，直接解构就可以使用了。

使用函数同步改变state值

如果我们想改变state值，则需要在connect中传入第二个参数，该参数中记录了所有可以控制state值变化的函数。在React-Redux中，state的值是通过type来改变的。这需要配置。我们以改变c的值为例。首先我们需要在reducer中进行配置。

首先由于react不能直接修改state，所以我们需要将prevstate解构赋值给新的newstate,之后通过不同的type来赋予不同的值。

当我们在connect中传入第二个参数时，我们就可以使用函数来改变type，进而改变state值了。

在这里我们将第二个参数命名为reduxFunction,这是一个对象，对象中用来存储各个函数。在这里我们简单设置两个函数，一个是show一个是hide。注意！函数的返回值必须是对象，这是redux的规定。而返回的对象被存储在readucer的第二个参数action中！我们可以看到，两个函数分别改变了type值，再结合刚才我们在Reducer中设置好的规则，这样我们就可以利用函数来实现对state的控制了。

函数的使用方法也很简单，与state一样，都是通过props传进组件内再解构赋值。但与state不同的是，函数在使用时要加（），例如show(),hide()等。

另外值得一提的是，函数是可以传参的，我们可以将参数写进括号内传给参数。若将上述案例改为可以传参的，则改变如下：

在使用时假如show函数传入参数true,那么再定义时就要将参数传给第二个key,这个key值的命名是随便的（第一个key值必须是type）。

另一处改动就是在Reducer中，当type值为true时触发show()，此时将payload值传递给对应的state即可。

使用函数异步改变state值

异步与同步唯一的不同在于函数返回的东西不是对象，而是函数或promise对象。这需要使用中间键。若使用的中间键位redux-thunk，则支持返回函数；若使用的中间键为redux-promise，则支持返回promise对象；下面我们以redux-thunk为例，若在项目中使用了异步redux则需要作出如下改变。

首先在createStore中加入第二个参数applymiddleware（thunk），这样我们的rudux函数才能返回函数。

其次在函数定义的时候，我们return一个匿名函数，格式如下：

匿名函数的参数为dispatch,这样我们可以做到异步，最后将请求到的数据使用dispatch包起来即可。

异步比同步只有这两处不同。其余的都一样。

以上就是React-redux的基本用法，欢迎初学者小伙伴们参考。