[Reactjs] Redux cơ bản phần 1

Một số đặc điểm nổi bật của Redux

  • Single source of truth: State của toàn bộ ứng dụng được lưu trữ trong một cây đối tượng ở trong store
  • State is read-only: Cách duy nhất để thay đổi state của store là thông qua các action – nó mô tả hành động đang diễn ra.
  • Changes are made with pure functions:: để xác định state thay đổi như thế nào cần thực hiện thông qua các reducer

Các thành phần cốt lõi của Redux:

  • Store: nơi lưu trữ duy nhất các state của toàn bộ ứng dụng. Mọi thông tin cần sử dụng ở ứng dụng đều được lấy từ store
  • Action: đối tượng mô tả hành động đang diễn ra cùng với dữ liệu liên quan đính kèm ở hành động đó.
  • Reducer: là hàm định nghĩa các xử lý khi có một action tác động lên store và xác định các state trong store sẽ thay đổi ra sao, như thế nào

Các thành phần liên quan khác trong Redux:

  • createStore(): hàm này là một factory method, trả về một store gắng với reducer truyền vào
  • store.dispatch(): hàm này gửi một action đến reducer
  • store.subscribe(): hàm này sẽ thêm hàm cần được gọi khi trạng thái trong store bị thay đổi
  • Action creator: hàm return một đối tượng action

Ví dụ cơ bản

  • Tạo project reactjs
  • Tạo cấu trúc thư mục như sau:
  • actions/index.js: chứa action creator để tạo action
export function setTechnology (text) {
    return {
       type: "SET_TECHNOLOGY",
       tech: text
     }
  }
  • reducers/index.js: chứa reducer xác định sẽ làm gì khi có action mới đến để tạo ra trạng thái mới của store và return về
export default (state,action)=>{
    switch (action.type) {
        case 'SET_TECHNOLOGY':
            return {
                ...state,
                tech:action.tech,
            }

        default:
            return state;
    }
}
  • store/index.js: tạo store đăng kí liên kết với reducer với giá trị khởi tạo
import {createStore} from 'redux'
import reducers from '../reducers'
const initialState = {tech:"React"};
export const store = createStore(reducers,initialState);
  • App.js
import React from 'react';
import './App.css';
import HelloWorld from './HelloWorld'
import {store} from './store'
import ButtonGroup from './ButtonGroup'
function App() {
  return (
    <div>
      <HelloWorld tech={store.getState().tech}/>
      <ButtonGroup technoligies={["React", "Elm", "React-redux"]} />
    </div>
  );
}
export default App;
  • ButtonGroup.js: xác định mỗi khi click sẽ gọi hàm tạo action rồi dispatch gửi thông tin hành động mới đến reducer để tạo ra store với trạng thái mới.
import React from "react"
import {setTechnology} from './actions'
import { store } from "./store";
const ButtonGroup = ({technoligies})=>(
    <div>
        {technoligies.map((tech,i)=>(
            <button data-tech={tech}
            key={`btn-${i}`}
            className="hello-btn"
            onClick = {dispatchBtnAction}>
            {tech}
            </button>
        ))}
    </div>
);
function dispatchBtnAction(e){
    const tech = e.target.dataset.tech;
    store.dispatch(setTechnology(tech));
}
export default ButtonGroup;
  • HelloWorld.js
import React from 'react'
const HelloWorld=({tech})=>{
    return (<div>Hello {tech}</div>);
};
export default HelloWorld;
  • index.js: xác định mỗi lần trạng thái store thay đổi sẽ vẽ lại toàn bộ ứng dụng
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {store} from './store'
const render = function(){ReactDOM.render(<App />, document.getElementById('root'))};
render();
store.subscribe(render)
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
  • Kết quả: khi click các button text của phần HelloWorld bị thay đổi

Nguồn tham khảo

[1]understanding-redux-the-worlds-easiest-guide-to-beginning-redux

Leave a Reply

Your email address will not be published. Required fields are marked *