Mở đầu
Tiếp nối bài viết về Redux cho người mới bắt đầu, trong bài viết này chúng ta sẽ cùng nhau thực hiện một Todo app để tìm hiểu cách sử dụng redux trong một project thực tế.
Trước khi bắt đầu cùng nhìn lại 1 lần các nhân vật ở kì trước :
Setup
Trong bài viết này mình sẽ sử dụng React + Redux. Chúng ta có thể tạo nhanh một react app thông qua create-react-app:
1 2 3 4 | sudonpminstall-gcreate-react-app create-react-apptest-react-redux |
Tiếp theo là Redux:
1 2 3 4 | cdtest-react-redux npminstall--savereduxreact-redux |
- react-redux : chính là The view layer binding trong kì trước, làm nhiệm vụ kết nối cho redux và react.
Let’s go
1.Cấu trúc thư mục
Ở phần trước chúng ta đã biết một app sử dụng Redux có 4 thành phần cơ bản action reducer store và view. Trong đó store chúng ta chỉ việc khởi tạo trong root component còn việc quản lý Redux sẽ lo. view thì bao gồm smart components (containers) những components giao tiếp với Redux và dumb components (components) những components không giao tiếp với Redux. Các action type của dụng thường là các hằng số được định nghĩa trước.
Do đó để tiện việc quản lý chúng ta có thể tạo ra các thư mục actions constants reducers containers components, app của chúng ta sẽ có cấu trúc như sau:
2.Actions
Đầu tiên chúng ta sẽ tạo ra các actions, các bạn còn nhớ The Action creators không, anh ta tạo ra những action là formated object chứa type và thông tin của action đó. Type thường sẽ là một hằng số được định nghĩa trước.
Ở đây chúng ta có TodoActions định nghĩa ra các thao tác thêm sửa xóa… công việc. Các action mang type và các thông tin id, text.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | // actions/TodoActions.js import *astypesfrom'../constants/ActionTypes'; exportfunctionaddTodo(text){ return{ type:types.ADD_TODO, text }; } exportfunctiondeleteTodo(id){ return{ type:types.DELETE_TODO, id }; } exportfunctioneditTodo(id,text){ return{ type:types.EDIT_TODO, id, text }; } exportfunctionmarkTodo(id){ return{ type:types.MARK_TODO, id }; } exportfunctionmarkAll(){ return{ type:types.MARK_ALL }; } exportfunctionclearMarked(){ return{ type:types.CLEAR_MARKED }; } |
3. Reducers
Tiếp theo là các reducers, chúng ta tạo ra các sub-reducers và một root-reducer quản lý chung. Reducers là các pure function hoạt động theo nguyên lý :
(state, action) => (new state)
Vì là pure function nên các reducers sẽ không trực tiếp thay đổi state mà nó nhận được, mà tạo ra các bản copy và thay đổi trên đó. Để thực hiện điều này chúng ta có thể dùng các function filter() map() Object.assign()…
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | // reducers/todosReducers.js import{ADD_TODO,DELETE_TODO,EDIT_TODO,MARK_TODO,MARK_ALL,CLEAR_MARKED}from'../constants/ActionTypes'; constinitialState=[{ text:'Use Redux', marked:false, id:0 }]; exportdefaultfunctiontodos(state=initialState,action){ switch(action.type){ caseADD_TODO: return[{ id:(state.length===0)?0:state[0].id+1, marked:false, text:action.text },...state]; caseDELETE_TODO: returnstate.filter((todo)=>todo.id!==action.id); caseEDIT_TODO: returnstate.map((todo)=>todo.id===action.id?{...todo,text:action.text}:todo); caseMARK_TODO: returnstate.map((todo)=>todo.id===action.id?{...todo,marked:!todo.marked}:todo); caseMARK_ALL: constareAllMarked=state.every((todo)=>todo.marked); returnstate.map((todo)=>({...todo,marked:!areAllMarked})); caseCLEAR_MARKED: returnstate.filter((todo)=>todo.marked===false); default: returnstate; } } |
Root-reducer sẽ tập hợp các sub-reducers lại thông qua combineReducers() của Redux.
1 2 3 4 5 6 7 8 9 10 11 | // reducers/rootReducers.js import{combineReducers}from'redux'; importtodosReducersfrom'./todosReducers'; constrootReducer=combineReducers({ todosReducers }); exportdefaultrootReducer; |
4.Views
- Smart Component (containers)Containers là những component giao tiếp với Redux thông qua connect() của react-redux .
connect() nhận vào 4 tham số mapStateToProps mapDispatchToProps mergeProps options:
- mapStateToProps(state, [ownProps]) là function. Nếu được định nghĩa, container sẽ được đăng ký (subscribe) với store. Mỗi khi store update mapStateToProps sẽ được gọi, object mà nó trả về sẽ được merge với props của container. Nếu ownProps được định nghĩa, giá trị của nó sẽ là props được gửi cho container, đồng thời mỗi khi container nhận được new props thì mapStateToProps cũng sẽ được gọi. Nếu mapStateToProps không được định nghĩa container sẽ không được đăng ký và nhận update từ store.
- mapDispatchToProps là object hoặc function. Nếu là object mỗi function bên trong object sẽ được coi là một action creator, đồng thời tất cả function này sẽ được tự động chay bởi bindActionCreators() và merge chúng với props của container. Nếu là function mapDispatchToProps sẽ nhận 2 tham số (dispatch, [ownProps]), chúng ta sẽ tự định nghĩa cách bind action với dispatch, chúng ta cũng có thể sử dụng bindActionCreators({action}, dispatch) để tự động bind. Nếu ownProps được định nghĩa, giá trị của nó sẽ là props được gửi cho container, đồng thời mỗi khi container nhận được new props thì mapDispatchToProps cũng sẽ được gọi. Nếu mapDispatchToProps không được định nghĩa sẽ chỉ có dispatch được merge vào props của container.
- mergeProps(stateProps, dispatchProps, ownProps) là function. Nếu được định nghĩa, nó sẽ nhận vào tham số là kết qủa của mapStateToProps mapDispatchToProps và parent props. Object mà nó trả về là props được gửi cho container. Nếu không được định nghĩa Object.assign({}, ownProps, stateProps, dispatchProps) sẽ được sử dụng mặc định.
- options là object. Nếu được định nghĩa sẽ điều chỉnh hành vi của connector. Chứa 2 giá trị pure và withRef. Nếu pure = true thì thực thi shouldComponentUpdate() và so sánh kết qủa của mergeProps để tránh những update không cần thiết, mặc định là true. Nếu withRef = true thì lưu trữ lại ref đến container instance và có thể truy cập thông qua getWrappedInstance(), mặc định false.
Trong app của chúng ta có 1 container là TodoApp:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | // containers/TodoApp.js importReact,{Component}from'react'; import{connect}from'react-redux'; import{bindActionCreators}from'redux'; importHeaderfrom'../components/Header'; importMainSectionfrom'../components/MainSection'; import *asTodoActionsfrom'../actions/TodoActions'; classTodoAppextendsComponent{ render(){ const{todos,actions}=this.props; return( <div> <HeaderaddTodo={actions.addTodo}/> <MainSectiontodos={todos}actions={actions}/> </div> ); } } functionmapStateToProps(state){ return{ todos:state.todosReducers }; } functionmapDispatchToProps(dispatch){ return{ actions:bindActionCreators(TodoActions,dispatch) }; } exportdefaultconnect(mapStateToProps,mapDispatchToProps)(TodoApp); |
- Dump Components
Là những component thông thường, chúng không giao tiếp với Redux, chỉ nhận giá trị và thao tác thông qua props.
Các xử lý hiển thị dữ liệu sẽ thực thi ở đây và các action nhận được từ container sẽ sử dụng như callback.
Trong app của chúng ta chúng là Header, MainSection …..
5.Root component
Trong mọi React-app đều có root component, ở app sử dụng Redux root component đảm nhận thêm việc khởi tạo store và bao các component lại với Provider của react-redux giúp component có thể giao tiếp với redux.
