state.board.map((mark, i) => ({ mark, select: !anyWinning ? () => dispatch(select(i)) : null, isWinning: winningTiles[i] }))
// Event handlers function onDragStart(e) { const clientY = e.type === 'touchstart' ? e.touches[0].clientY : e.clientY; if (state.nodes.some(node => node === e.target)) { dispatch({ type: 'DRAG_START', payload: { initialY: clientY, node: e.target } }); } }
const GlobalContextProvider = (props) => { const [state, dispatch] = useReducer(GlobalReducer, DEFAULT_GLOBAL_STATE); const stateChangeHandler = (actionType, value) => { dispatch({ type: actionType, counter: (value + 1)}); } return ( <GlobalContext.Provider value={{...state, setCounter: stateChangeHandler}}> {props.children} </GlobalContext.Provider> ); }
function onDrag(e) { if (state.isDragging) { e.preventDefault(); const clientY = e.type === 'touchmove' ? e.touches[0].clientY : e.clientY; dispatch({ type: 'SET_CURRENT_Y', payload: clientY - state.initialY }); } }
useEffect(() => { const fetchPosts = async () => { const result = await axios.get('https://jsonplaceholder.typicode.com/posts'); dispatch({ type: 'FETCH_POSTS', posts: result.data }); setLoading(false) return result; } fetchPosts(); }, [])
export default function SimpleReduxHookExample() { const [store, dispatch] = useReducer(reducer, initialState); return ( <Context.Provider value={{store, dispatch}}> <div> <h1>Simple Example using Hooks (with useContext and useReducer)</h1> <button onClick={() => dispatch({type: "SET_ROW_DATA"})} className="btn btn-primary">Populate Row Data</button> <GridComponent/> </div> </Context.Provider> ) }
const HooksUseReducer = () => { const [state, dispatch] = useReducer(reducer, initialState) return( <div> <h1>Hooks useReducer</h1> <p>Count: {state.count}</p> <button onClick={() => dispatch({type: 'increment'})}>+</button> <button onClick={() => dispatch({type: 'decrement'})}>-</button> </div> ) }
function CounterOne() { const [count, dispatch] = useReducer(reducer, initialState); return ( <div> <div>Count {count}</div> <button onClick={() => dispatch("increment")}>Increment</button> <button onClick={() => dispatch("decrement")}>Decrement</button> <button onClick={() => dispatch("reset")}>Reset</button> </div> ); }
function Reducerhook() { const [state, dispatch] = useReducer(reducerFun, initialState) return ( <div> <div>I am Reducer hook</div> <div>count from Reducer Hooks: {state.count}</div> <button onClick={() => dispatch({ type: 'increment' })}>clickMe</button> </div> ) }
const HookCounterReducer = () => { const [count, dispatch] = useReducer(reducer, initialState); return ( <div> <span>{count}</span> <button onClick={() => dispatch('increment')}>Increment</button> <button onClick={() => dispatch('decrement')}>Decrement</button> <button onClick={() => dispatch('reset')}>Reset</button> </div> ); }
const CounterOne = () => { const [count, dispatch] = useReducer(reducer, initialState); return ( <div> <div>Count - {count}</div> <button onClick={() => dispatch("increment")}>Increment</button> <button onClick={() => dispatch("decrement")}>Decrement</button> <button onClick={() => dispatch("reset")}>Reset</button> </div> ); }