Ένας επιμελημένος οδηγός αναφοράς για βασικές βιβλιοθήκες, action creators και ασύγχρονα middleware στο οικοσύστημα του 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)
Ένα ανθρώπινο πρότυπο για αντικείμενα ενεργειών με 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)
);
Ασύγχρονα Middlewares και Παρενέργειες
redux-thunk
Επιτρέπει σε action creators να επιστρέφουν συνάρτηση με πρόσβαση στα 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));
redux-promise
FSA middleware υποσχέσεων που επιλύει αυτόματα 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
Καταγράφει μεταβάσεις κατάστασης και ενέργειες απευθείας στην κονσόλα του προγράμματος περιήγησης:
import { createLogger } from 'redux-logger';
const logger = createLogger({
collapsed: true,
diff: true
});