redux react-redux入门篇

接触react 之后不就， 就练习react-redux，结果是一团糟越看越觉得不同，最后总算攻克了。

网址：https://www.redux.org.cn（中文），https://redux.js.org（英文）

介绍

redux：Redux是JavaScript应用程序的可预测状态容器。您可以将Redux与React或任何其他视图库一起使用。（官方文档介绍）本人只在react中使用过

react-redux : 可以视作redux为了更好的让redux在react中使用，新增了Provider，  connect功能，是的开发更加方便，快捷。

个人理解：想学习使用react-redux 必须先学习使用redux，react-redux只是redux为react新增几个功能。

redux

推荐一个chrome插件 用于调试应用程序状态更改的Redux DevTools ；使用效果

我的 redux 代码

import { createStore, combineReducers } from 'redux';
const countReducer = (state = { count: 1 }, action) => {
  switch (action.type) {
    case 'ADD_COUNT':
      return state.count + 1
    case 'DEL_COUNT':
      return state.count - 1
    default:
      return state
  }
}
const messageReducer = (state = [], action) => {
  switch (action.type) {
    case 'ADD_MESSAGE':
      state = action.text
    default:
      return state
  }
}
const rootReducers = combineReducers({
  count: countReducer,
  reducer: messageReducer
});
const store = createStore(
  rootReducers,
  / * preloadedState，* / + window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

store.dispatch(
  { type: 'ADD_COUNT' }
)
store.dispatch(
  { type: 'ADD_MESSAGE' ,text:'内容'}
)

combineReducers(reducers)

随着应用变得越来越复杂，可以考虑将 reducer 函数 拆分成多个单独的函数，拆分后的每个函数负责独立管理 state 的一部分。