为了创建 store,需要将 reducer 函数当做第一个参数传递给 Redux 的 createStore() 方法。createStore() 所返回的就是 store 本身。该 store 具有三个属性:
- getState()
- dispatch()
- subscribe()
.getState()
store.getState()
不需要任何参数,并且将返回 store 的当前状态。
.dispatch()
store.dispatch(action)
传入 action 对象,并且将调用 reducer 函数,向其传递当前状态和所派遣的 action。例如:
// store.js
import { createStore } from 'redux';
import reducer from '../reducers/reducer';
let store = createStore(reducer);
const receiveComment = comment => ({
type: 'RECEIVE_COMMENT',
comment
});
export default store;
store.getState(); // []
store.dispatch(receiveComment('Redux is great!'));
store.getState(); // ['Redux is great!']
.subscribe()
store.subscribe(cb)
传入监听器回调函数,每当状态改变时,就会调用该函数。
Redux 开发者工具
Redux 开发者工具为 Redux 开发流程带来了很多便利。它使你能够查看 store 的当前状态,并根据所派遣的 action 判断该状态如何改变。请访问 Redux 开发者工具扩展程序页面,将其添加到浏览器中。
//调用代码示例:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';
import { createStore } from 'redux'
import reducer from './reducers'
const store = createStore(
reducer,
// 使chrome浏览器中的redux工具, 可以方便的查看store的状态变化
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
)
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
总结
Redux 具有一个叫做 .createStore()
的方法。该方法将 reducer 函数作为其第一个参数,并返回一个其上具有以下方法的 store 对象:
- .getState()
- .dispatch()
- .subscribe()