ورقة غش منظومة Redux والبرمجيات الوسيطة Awesome Redux

دليل مرجعي منتقى للمكتبات الأساسية، منشئي الإجراءات وأنماط البرمجيات الوسيطة غير المتزامنة في منظومة Redux.

منشئو الإجراءات والأدوات المساعدة (Action Creators)

`redux-actions`

إنشاء دوال Action Creators متوافقة مع معيار Flux Standard Action (FSA):

import { createAction } from 'redux-actions';

const increment = createAction('INCREMENT', amount => amount);
// increment(42) → { type: 'INCREMENT', payload: 42 }

// Automatically handles error objects:
const err = new Error('Network failure');
// increment(err) → { type: 'INCREMENT', payload: err, error: true }

See: redux-actions on npm

معيار Flux Standard Action (FSA)

معيار متوافق وسهل القراءة لكائنات إجراءات Flux، يحتوي فقط على type و payload و error و meta الاختياري:

// Success action
{
  type: 'ADD_TODO',
  payload: { text: 'Write documentation' }
}

// Error action
{
  type: 'ADD_TODO',
  payload: new Error('Failed to save'),
  error: true
}

See: flux-standard-action on GitHub

`redux-multi`

إمكانية إرسال مصفوفة من الإجراءات المتعددة في استدعاء dispatch واحد:

store.dispatch([
  { type: 'INCREMENT', payload: 1 },
  { type: 'NOTIFY', payload: 'Count updated' }
]);

`reduce-reducers`

دمج دوال reducers المتتالية دون تقسيم فضاءات الأسماء:

import reduceReducers from 'reduce-reducers';

const combined = reduceReducers(
  (state, action) => (action.type === 'ADD' ? state + action.payload : state),
  (state, action) => (action.type === 'MULTIPLY' ? state * action.payload : state)
);

البرمجيات الوسيطة غير المتزامنة (Async Middleware)

`redux-thunk`

تتيح كتابة منشئي إجراءات يعيدون دالة بدلا من كائن، مع إمكانية الوصول إلى dispatch و getState:

const fetchUser = (id) => async (dispatch, getState) => {
  dispatch({ type: 'FETCH_USER_REQUEST' });
  try {
    const res = await fetch(`/api/users/${id}`);
    const data = await res.json();
    dispatch({ type: 'FETCH_USER_SUCCESS', payload: data });
  } catch (error) {
    dispatch({ type: 'FETCH_USER_FAILURE', payload: error, error: true });
  }
};

// Dispatch like a normal action:
store.dispatch(fetchUser(42));

See: redux-thunk on GitHub

`redux-promise`

برمجية وسيطة متوافقة مع معيار FSA، تحل الوعود Promises الممررة في payload تلقائيا قبل وصولها للمخزن:

import { createAction } from 'redux-actions';

const fetchPosts = createAction('FETCH_POSTS', async () => {
  const response = await fetch('/api/posts');
  return response.json();
});

// Resolves payload promise automatically:
store.dispatch(fetchPosts());

`redux-logger`

تسجيل انتقالات الحالة والإجراءات المرسلة مباشرة في لوحة تحكم المتصفح DevTools:

import { createLogger } from 'redux-logger';

const logger = createLogger({
  collapsed: true,
  diff: true
});