在 Redux 中,store 是一个存储应用程序状态的容器对象,它负责管理应用程序中的所有状态,并提供访问和更新状态的方法。store 包含以下三个重要的方法:
- getState():获取应用程序的当前状态。
- dispatch(action):更新应用程序状态的唯一途径,即通过派发 action 来触发状态更新。
- subscribe(listener):注册监听器,每当派发 action 后,监听器会被触发,可以在监听器中执行一些逻辑操作,例如更新 UI。
store 通常在应用程序的入口文件中创建,并在整个应用程序中共享。通过 dispatch 方法派发 action 后,store 会自动调用 reducer 函数来计算新的应用程序状态,并触发所有注册的监听器,通知应用程序状态已经发生了变化。
脚手架需要安装redux,没有yarn可以用npm。
创建一个store目录存放一个js文件,里面创建了store
接下来其实还需要一个辅助笔记本,创建出来之后给管理员使用--reducer
1 reducer
同样在store目录下创建,里面只需要返回一个函数就好了。
返回的函数,接受state和action。
state:存放收集的信息,store仓库存储的数据,我们可以给state附一个初始空对象
const defaultState = {};
export default (state = defaultState,action)=>{ return state; }
接着我们需要把本子reducer传给store:
import {createStore} from 'redux';
import reducer from "./reducer";
const store = createStore(reducer);
export default store;
这里我们尝试按照TodoList设置一个初始值:
const defaultState = { inputValue: '', list:[] };
export default (state = defaultState,action)=>{ return state; }
这时候Store其实就知道自己的库里面有两种数据了,接着组件就可以连接Store来取得数据了!
2. 组件获取数据
首先引入仓库:
import store from "./store";
上面省略/index.js,他会自己找的。
光这样写,会未定义错误,因为目前还没办法给List用,但是可以看到打印的值
此时我们让组件存储store的值:
接着我们在界面中使用:
Store存储全局数据,别的组件需要获取都需要调用它
Reducer是负责管理数据的,里面返回一个函数用来处理数据,包括默认数据。
Action在下面会说到的。
3.思考
Redux 中的 store 是单一数据源的概念的体现,它确保了应用程序的状态是唯一的、可预测的,并且状态的更新是通过 action 和 reducer 来进行管理的,从而使得应用程序状态的变化更加可控和可维护。