**React-Redux源码解析 一(createStore)的妙用**
2023-10-14 16:45:49
在React-Redux的源码世界中,createStore函数扮演着至关重要的角色。它是Redux应用的根基,负责创建Redux的核心对象——Store。Store就像一个集装箱,它保存着应用的状态信息,并允许组件访问和修改这些状态。
createStore函数接受三个参数:reducer、preloadedState和enhancer。其中,reducer是一个函数,它负责根据当前状态和传入的action,计算出新的状态。preloadedState是一个可选参数,它允许您在创建Store时指定初始状态。enhancer也是一个可选参数,它允许您增强Store的功能。
在本文中,我们将重点探讨createStore函数的第一个参数:reducer。
CurrentReducer:幕后功臣
reducer是Redux应用的核心,它负责根据当前状态和传入的action,计算出新的状态。createStore函数内部有一个名为currentReducer的变量,它存储着当前的reducer。
我们发现currentReducer其实是一个函数,而且需要两个参数:currentState和action。currentReducer返回的值赋值给currentState,由createStore传入的参数的分析得知,preloadedState作为currentState的初始值。
当您在Redux应用中dispatch一个action时,Redux会调用currentReducer函数,将当前状态和action作为参数传递给它。currentReducer函数根据这两个参数计算出新的状态,并将其返回。
Action:状态的改变者
Action是一个纯JavaScript对象,它了状态应该如何改变。Action必须具有type属性,type属性的值是一个字符串,它标识了action的类型。Action还可具有其他属性,这些属性包含了有关如何更改状态的信息。
当您在Redux应用中dispatch一个action时,Redux会将该action传递给currentReducer函数。currentReducer函数根据action的type属性,决定如何更改状态。
例如,如果您有一个名为counter的reducer,它负责管理计数器的状态。当您dispatch一个名为INCREMENT_COUNTER的action时,counter reducer会将计数器状态加一。
Store:状态的管理者
Store是Redux应用的核心对象,它负责保存和管理应用的状态。您可以通过getState()方法获取Store中的状态,也可以通过dispatch(action)方法向Store发送action。
createStore函数创建了一个Store对象,并将其作为返回值返回。您可以在应用中使用这个Store对象来管理状态。
总结
createStore函数是Redux应用的根基,它负责创建Store对象。Store对象保存着应用的状态,并允许组件访问和修改这些状态。
reducer是Redux应用的核心,它负责根据当前状态和传入的action,计算出新的状态。
Action是一个纯JavaScript对象,它了状态应该如何改变。
通过使用createStore函数和reducer,您可以构建强大的Redux应用,轻松管理应用的状态。