Giới thiệu react-recontext

Thư viện quản lý state gọn nhẹ, lấy cảm hứng từ Flux và Redux, dựa trên React Context API mới nhất.

Github: https://github.com/minhtc/react-recontext

Cực kỳ đơn giản và dễ dùng để xây dựng ứng dụng React và React Native theo kiến trúc kiểu Flux.

Theo kiến trúc Flux nhưng chỉ có một Store gốc duy nhất:

Cài đặt

npm install --save react-recontext

hoặc

yarn add react-recontext

API

1. createStore(initialState, actionsCreators, enableLogger): tạo Store gốc của ứng dụng! 😗
2. <Provider />: bọc quanh Component gốc.
3. connect(mapStateToProps)(Component): kết nối React Component với Store, rất dễ lấy giá trị từ store trong bất kỳ component nào.
4. dispatch(actionType, params): gửi một sự kiện để cập nhật giá trị của Store, từ bất cứ đâu.

Phần quan trọng và vui:

Bạn không cần tạo action type thủ công nữa. Chúng được sinh ra tự động. Ví dụ:

• actions creators:

const actionsCreators = {
  addTodoItem: (state, { item }) => ({
    list: state.list.push(item)
  })
}

• đổi tên action từ camel case sang screaming snake case (addTodoItem => ADD_TODO_ITEM) rồi dispatch action.

dispatch('ADD_TODO_ITEM', { item: item })

Ví dụ

Có vài ứng dụng mẫu để bạn thử:

• Todo App Example
• Audiobook React Native App
• …

Cách dùng

Chỉ cần 3 bước để bắt đầu với react-recontext:

1. Tạo store.js

import createStore from 'react-recontext'

// tạo state khởi tạo của ứng dụng
const initialState = {
    todos: \[\]
};

// tạo các action của ứng dụng, action type sẽ được sinh tự động
const actionsCreators = {
  toggleItem: (state, { todoId }) => ({
    todos: state.todos.map((todo) =>
      todo.id === todoId ? { ...todo, completed: !todo.completed } : todo
    )
  })
}

// bật logger để debug
const enableLogger = \_\_DEV\_\_

// createStore cần 3 tham số và trả về một recontext store
const store = createStore(initialState, actionsCreators, enableLogger)

// export store
export store

1. Bọc component gốc bằng Provider

• react:

import React from 'react'
import ReactDOM from 'react-dom'

import App from './App'
import { Provider } from './store'

ReactDOM.render(
  <Provider>
    <App />
  </Provider>,
  document.getElementById('root')
)

• react-native + react-nativation

import { createStackNavigator } from 'react-navigation'

import { Provider } from './store'

const AppNavigator = createStackNavigator(...)

// bọc component gốc bằng <Provider /> import từ recontext store
const App = () => (
  <Provider>
    <AppNavigator />
  </Provider>
)

1. Kết nối component để lấy dữ liệu và gọi action ở bất cứ đâu bạn muốn

import React from 'react'

import Todo from './Todo'
import { connect, dispatch } from './store'

const TodoList = ({ todos }) => (
  <ul>
    {todos.map((todo) => (
      <Todo
        key={todo.id}
        todo={todo}
        onClick={() => dispatch('TOGGLE\_ITEM', { todoId: todo.id })} // dispatch action type để cập nhật giá trị store
      />
    ))}
  </ul>
)

const mapStateToProps = (state) => ({
  todos: state.todos
})

// kết nối component để lấy giá trị từ store
export default connect(mapStateToProps)(TodoList)

Debug

Hỗ trợ debug bằng cách in ra mọi thay đổi của store, ví dụ: