diff --git a/README.md b/README.md index 7fbe27f..a1129db 100644 --- a/README.md +++ b/README.md @@ -54,12 +54,14 @@ $ npm i @evilfactory/global-state - `props.reducer` - `props.initialState` - `props.children` + - `props.actions` ### Properties - `reducer` **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)** **[| useReducer](https://reactjs.org/docs/hooks-reference.html#usereducer)** - `initialState` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** - `children` **[Element](https://developer.mozilla.org/docs/Web/API/Element)** **[| createElement](https://reactjs.org/docs/react-api.html#createelement)** +- `actions` **([Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) \| [Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function))** ### Examples @@ -85,8 +87,15 @@ function todoReducer(state, action) { } } +function createTodo(state,action, todo){ + return action({type: 'ADD_TODO', todo}) +} + +// const [state, actions] = useGlobalState() +// actions.createTodo({title: 'New Todo Created', status: 'pending'}) + ReactDOM.render( - + , document.getElementById('root')) @@ -111,8 +120,8 @@ const createTodo = (state, action, todo) => { }) } -const [,addTodo] = useGlobalState(createTodo) +const [,actions] = useGlobalState(createTodo) -addTodo({title: 'New Task'}) +actions.createTodo({title: 'New Task'}) ... ``` diff --git a/__tests__/index.js b/__tests__/index.js index 9f3e9d7..5b259a2 100644 --- a/__tests__/index.js +++ b/__tests__/index.js @@ -16,7 +16,10 @@ test('StateProvider & useGlobalState test', () => { default: return state } }, - initialState: {test: false} + initialState: {test: false}, + actions: [ + function changeTest(state, action){return action({ type: 'TEST' })} + ] } const ShowTest = () => { @@ -29,10 +32,10 @@ test('StateProvider & useGlobalState test', () => { } const ChangeTest = () => { - const [, dispatch] = useGlobalState() + const [, actions] = useGlobalState() const handleClick = () => { - dispatch({ + actions.changeTest({ type: 'TEST' }) } diff --git a/lib/index.js b/lib/index.js index 081676b..629c73e 100644 --- a/lib/index.js +++ b/lib/index.js @@ -20,12 +20,20 @@ import { */ const StateContext = createContext() +/** + * @ignore + * @var {Object} actions + */ +let actions = {} +const memoActions = [] + /** * @name * @param {Object} props * @property {Function} reducer **{@link https://reactjs.org/docs/hooks-reference.html#usereducer | useReducer}** * @property {Object} initialState * @property {Element} children **{@link https://reactjs.org/docs/react-api.html#createelement | createElement}** + * @property {Array|Function} actions * @description * **** as Wrapper of your `React` Application. * @@ -48,16 +56,35 @@ const StateContext = createContext() * } * } * + * function createTodo(state,action, todo){ + * return action({type: 'NEW_TODO', todo}) + * } + * + * // const [state, actions] = useGlobalState() + * // actions.createTodo({title: 'New Todo Created', status: 'pending'}) + * * ReactDOM.render( - * + * * * * , document.getElementById('root')) * */ -export const StateProvider = ({reducer, initialState, children }) => createElement(StateContext.Provider, { - value: useReducer(reducer, initialState) -}, children) +export const StateProvider = ({reducer, initialState, children, actions:newActions}) => { + if(Array.isArray(newActions)){ + for(let i=0; i createEleme * }) * } * - * const [,addTodo] = useGlobalState(createTodo) + * const [,actions.createTodo] = useGlobalState(createTodo) * - * addTodo({title: 'New Task'}) + * actions.createTodo({title: 'New Task'}) * ... */ export const useGlobalState = (newAction) => { const [state, action] = useContext(StateContext) // newAction is action injector - return [state, newAction ? newAction.bind(null, state, action) : action ] + + // bind action + // Object iteration + for(let i in actions){ + if(!memoActions.includes(i)) { + actions[i]=actions[i].bind(null,state, action) + memoActions.push(i) + } + } + + newAction = newAction ? { + [newAction.name]: newAction.bind(null, state, action), + } : actions + + return [state, newAction] }