• TodoList
• 1. 編寫actions.js
• 2. 分析state
  • 試著拆分成多個(gè)reducer
• 3. 了解store
• 4. 了解redux數(shù)據(jù)流生命周期
• 5. 分析容器組件和展示組件
  • 搞清楚，數(shù)據(jù)到底是如何流動(dòng)的？
• 6. 編寫展示組件的代碼
• 7. 編寫容器組件
• 8. 傳入store
• 9. 總結(jié)
• 10. 參考

TodoList

腳手架Github地址

1. 編寫actions.js

2. 分析state

試著拆分成多個(gè)reducer

3. 了解store

store.getState()

store.dispatch(action)

store.subscribe(listener)注冊(cè)監(jiān)聽器

調(diào)用store.subscribe(listener)返回的函數(shù)來(lái)注銷監(jiān)聽器

4. 了解redux數(shù)據(jù)流生命周期

store.dispatch(action);

store調(diào)用傳入的reducer。

根reducer將多個(gè)子reducer輸出的state合成一個(gè)單一的state樹。

store保存了根reducer返回的state樹。

5. 分析容器組件和展示組件

在這里，我遇到了很多問題。展示組件就沒有什么好說(shuō)的了，主要是容器組件。

搞清楚，數(shù)據(jù)到底是如何流動(dòng)的？

下面舉例：

React組件上有一個(gè)點(diǎn)擊事件。

當(dāng)點(diǎn)擊之后，點(diǎn)擊事件對(duì)應(yīng)一個(gè)dispatch(actionCreator())。

store會(huì)將actionCreator()返回的action以及當(dāng)前的state傳遞給reducer。

reducer收到action，然后根據(jù)action.type更新state，并且返回新的state。

store保存新的state。

state更新后，組件調(diào)用render()方法。

那么問題來(lái)了：

由于展示組件，沒有數(shù)據(jù)，那么數(shù)據(jù)該是如何來(lái)的？

回答：數(shù)據(jù)是從存放在state里的，如何將state里的數(shù)據(jù)，傳遞給展示組件呢？使用connect()函數(shù)，它接受兩個(gè)參數(shù)，兩個(gè)參數(shù)分別是函數(shù)。

function mapStateToProps(state) {return {todos: selectTodos(state.main.todos, state.main.visibilityFilter),visibilityFilter: state.main.visibilityFilter,}; }function mapDispatchToProps(dispatch) {return {onAddClick: text => dispatch(addTodo(text)),onFilterChange: nextFilter => dispatch(setVisibilityFilter(nextFilter)),}; }class Main extends Component { render() { return ( <AddTodo onAddClick={this.props.onAddClick} /> <VisibleTodoList /> <Footer onFilterChange={this.props.onFilterChange} visibilityFilter={this.props.visibilityFilter} /> ); } } Main.propTypes = { onAddClick: PropTypes.func.isRequired, onFilterChange: PropTypes.func.isRequired, visibilityFilter: PropTypes.oneOf([ 'SHOW_ALL', 'SHOW_ACTIVE', 'SHOW_COMPLETED', ]); }; export default connect(mapStateToProps, mapDispatchToProps)(Main);

• 上面的demo，是將Main作為一個(gè)展示組件。
• 將mapStateToProps和mapDispatchToProps注入到Main里。
• 所以在Main組件里，就可以使用注入的方法和屬性了。
• 值得注意的地方，在Main里使用的props都要進(jìn)行檢測(cè)，也就是下面的Main.propTypes。
• 除了將注入和組件寫在一個(gè)js文件里，還可以將它們分開寫。
• 就比如VisibleTodoList和TodoList分別寫。然后將2個(gè)函數(shù)注入到TodoList里去。
• 對(duì)了，初始化的state是寫在reducer里的，因?yàn)闊o(wú)論如何都會(huì)去調(diào)reducer。

在做的過(guò)程中，我還遇到了一個(gè)問題，它在幾個(gè)地方三番五次的阻撓我。

// 代碼里，我是這么獲取state的數(shù)據(jù)的。 state.todos: state.visibleFilter;// 但是事實(shí)上，使用的腳手架里，它對(duì)app包了一層路由，它在最外層的reducer里的代碼是這樣的。 import main from 'containers/Main/reducer'; export default function createReducer(asyncReducers) { return combineReducers( main, routing: routerReducer, ...asyncReducers, ); } // 所以我本身拿到的state是包含了main和routing這兩個(gè)對(duì)象的。因此我要拿我組件里的state的數(shù)據(jù)，應(yīng)該下面這樣： state.main.todos; state.visibleFilter;

6. 編寫展示組件的代碼

class類

每個(gè)組件都要對(duì)propTypes進(jìn)行驗(yàn)證

要export

7. 編寫容器組件

定義mapStateToProps()將當(dāng)前的state映射到組件的props, 讀取state操作。

定義mapDispatcherToProps(), 分發(fā)action操作。

• 傳入dispatch方法。
• 返回期望注入到展示組件的props中的回調(diào)方法。
• 回調(diào)方法里，可以分發(fā)action。

使用connect()方法。

export default const VisibleTodoList = connect(mapStateToProps,mapDispatcherToProps, )(TodoList); // TodoList為要被注入的展示組件

8. 傳入store

使用React Redux里的Provider組件，將store注入到Provider組件，它可以讓所有容器組件都可以訪問到store。

9. 總結(jié)

當(dāng)我遇到問題：

要沉著冷靜。

要管理好時(shí)間。

別被bug或error搞的不高興，要高興，又有煅煉思維的機(jī)會(huì)了。

要思考這是為什么？

要搞清楚問題的本質(zhì)。

要探究問題，探究數(shù)據(jù)的流動(dòng)。

10. 參考

React中文文檔
Github地址

轉(zhuǎn)載于:https://www.cnblogs.com/libin-1/p/6778443.html

總結(jié)

以上是生活随笔為你收集整理的react+redux+generation-modation脚手架搭建一个todolist的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。