loading...

0

redux个人理解

react读完大概需要3分钟

  • 发布时间:2018-05-08 16:19 星期二
  • 刘伟波
  • 278
  • 更新于2018-09-12 19:54 星期三

一  版本

"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);






你可能感兴趣的文章

    发表评论

    评论支持markdown,评论内容不能超过500字符,如果内容过多或者要及时回复,建议去 segmentfault平台, 也可以来我的直播间来提问。
    关于技术问题或者有啥不懂的都可以留言, 我会定期回复答疑, 也可以来 我的直播间 提问, 推荐最新仓库 前端知识体系, 感謝支持!