redux 核心-创建 Redux store

为了创建 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(, document.getElementById('root'));
registerServiceWorker();

总结

Redux 具有一个叫做 .createStore()的方法。该方法将 reducer 函数作为其第一个参数，并返回一个其上具有以下方法的 store 对象：

• .getState()
• .dispatch()
• .subscribe()