redux个人理解

一  版本

"react-redux": "^5.0.7",
"redux": "^4.0.0",

二 工具安装

1.通过谷歌商店安装redux-devtools，在redux暴露的方法createStore增加

 const store = createStore(
   reducer, /* preloadedState, */
   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );

https://github.com/zalmoxisus/redux-devtools-extension#usage

三 同步下redux个人理解

1.通过用户操作派发action;

this.props.onAddClick(txt)

// 用户添加待办项 action函数
export const addTodo = text => {
    return {
        type: ADD_TODO,
        text
    }
}

2.根据操作的action不同通过reducer进行响应;

3.利用redux暴露的combineReducers将不同响应合并成一个reducer;

import { combineReducers } from 'redux';

// 待办项 响应
const todos = (state = [], action) => {
  switch (action.type) {
   ...
  }
}

// 不同响应合并成一个reducer
const todoApp = combineReducers({
  todos
})

4,入口文件index利用redux暴露的createStore将合并后的reducer进行封装产生一个store,利用react-redux暴露的Provider将跟组件app进行包裹，传入store;

import {createStore} from 'redux';
import {Provider} from 'react-redux';

let store = createStore(todoApp,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
ReactDOM.render(
    <Provider store={store}>
        <App/>
    </Provider>
    , document.getElementById('root'));
registerServiceWorker();

5.根组件app利用react-redux暴露的通过 connect(select)(App) 连接 store 和 App 容器组件,暴露给index入口文件，获得store的props属性，并传递给各大组件,

import {connect} from 'react-redux';

const select = (state) => {
    console.log(state)// 这里进行一个一个映射，store为store的store
    return {
        visibleTodos: state.todos,
        visibilityFilter: 123
    }
}

export default connect(select)(App);