深入学习和理解 Redux

{ type: 'LIKE_ARTICLE', articleId: 42 }{ type: 'FETCH_USER_SUCCESS', response: { id: 3, name: 'Mary' } }{ type: 'ADD_TODO', text: '金融前端.' }

export {  createStore,  combineReducers,  bindActionCreators,  applyMiddleware,  compose,  __DO_NOT_USE__ActionTypes}

export default function createStore(reducer, preloadedState, enhancer) {...}

/** * Reads the state tree managed by the store. * * @returns {any} The current state tree of your application. */function getState() {  if (isDispatching) {    throw new Error(      'You may not call store.getState() while the reducer is executing. ' +        'The reducer has already received the state as an argument. ' +        'Pass it down from the top reducer instead of reading it from the store.'    )  }  return currentState}

/** * Turns an object whose values are different reducer functions, into a single * reducer function. It will call every child reducer, and gather their results * into a single state object, whose keys correspond to the keys of the passed * reducer functions. */export default function combineReducers(reducers) {  const reducerKeys = Object.keys(reducers)     ...  return function combination(state = {}, action) {     ...    let hasChanged = false    const nextState = {}    for (let i = 0; i < finalReducerKeys.length; i++) {      const key = finalReducerKeys[i]      const reducer = finalReducers[key]      const previousStateForKey = state[key]      const nextStateForKey = reducer(previousStateForKey, action)      if (typeof nextStateForKey === 'undefined') {        const errorMessage = getUndefinedStateErrorMessage(key, action)        throw new Error(errorMessage)      }      nextState[key] = nextStateForKey      //判断state是否发生改变      hasChanged = hasChanged || nextStateForKey !== previousStateForKey    }    //根据是否发生改变，来决定返回新的state还是老的state    return hasChanged ? nextState : state  }}

/** * Turns an object whose values are action creators, into an object with the * same keys, but with every function wrapped into a `dispatch` call so they * may be invoked directly. This is just a convenience method, as you can call * `store.dispatch(MyActionCreators.doSomething())` yourself just fine. */function bindActionCreator(actionCreator, dispatch) {  return function() {    return dispatch(actionCreator.apply(this, arguments))  }} export default function bindActionCreators(actionCreators, dispatch) {  if (typeof actionCreators === 'function') {    return bindActionCreator(actionCreators, dispatch)  }    ...    ...  const keys = Object.keys(actionCreators)  const boundActionCreators = {}  for (let i = 0; i < keys.length; i++) {    const key = keys[i]    const actionCreator = actionCreators[key]    if (typeof actionCreator === 'function') {      boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)    }  }  return boundActionCreators}

/** * Composes single-argument functions from right to left. The rightmost * function can take multiple arguments as it provides the signature for * the resulting composite function. * * @param {...Function} funcs The functions to compose. * @returns {Function} A function obtained by composing the argument functions * from right to left. For example, compose(f, g, h) is identical to doing * (...args) => f(g(h(...args))). */ export default function compose(...funcs) {  if (funcs.length === 0) {    return arg => arg  }   if (funcs.length === 1) {    return funcs[0]  }   return funcs.reduce((a, b) => (...args) => a(b(...args)))}

/** * Creates a store enhancer that applies middleware to the dispatch method * of the Redux store. This is handy for a variety of tasks, such as expressing * asynchronous actions in a concise manner, or logging every action payload. */export default function applyMiddleware(...middlewares) {  return createStore => (...args) => {    const store = createStore(...args)    ...    ...    return {      ...store,      dispatch    }  }}

const store = createStore(reducer);const next = store.dispatch; // 重写store.dispatchstore.dispatch = (action) => {    try {        console.log('action:', action);        console.log('current state:', store.getState());        next(action);        console.log('next state', store.getState());    } catch (error){        console.error('msg:', error);    }}

let state = {    count : 1}//修改之前console.log (state.count);//修改count的值为2state.count = 2；//修改之后console.log (state.count);

let state = {    count: 1};//订阅function subscribe (listener) {    listeners.push(listener);}function changeState(count) {    state.count = count;    for (let i = 0; i < listeners.length; i++) {        const listener = listeners[i];        listener();//监听    }}

const createStore = function (initState) {    let state = initState;    //订阅    function subscribe (listener) {        listeners.push(listener);    }    function changeState (count) {        state.count = count;        for (let i = 0; i < listeners.length; i++) {            const listener = listeners[i];            listener();//通知        }    }    function getState () {        return state;    }    return {        subscribe,        changeState,        getState    }}

let initState = {    counter: {        count : 0    },    info: {        name: '',        description: ''    }}let store = createStore(initState);//输出countstore.subscribe(()=>{    let state = store.getState();    console.log(state.counter.count);});//输出infostore.subscribe(()=>{    let state = store.getState();    console.log(`${state.info.name}:${state.info.description}`);});

//自增store.changeState({    count: store.getState().count + 1});//自减store.changeState({    count: store.getState().count - 1});//随便改成什么store.changeState({    count: 金融});

function plan (state, action) => {  switch (action.type) {    case 'INCREMENT':      return {        ...state,        count: state.count + 1      }    case 'DECREMENT':      return {        ...state,        count: state.count - 1      }    default:      return state  }}let store = createStore(plan, initState);//自增store.changeState({    type： 'INCREMENT'});//自减store.changeState({    type： 'DECREMENT'});