Redux

State

Context

Redux

Redux-Toolkit

Redux

State

Context

Redux

Redux-Toolkit

export default function SampleState() {
    const [counter, setCounter] = useState(0);
    return (
        console.log('render', counter),
        <div>
            <h1>State</h1>
            <h1>{counter}</h1>
            <Space>
            <Button type='primary' onClick={() => setCounter(state => (state + 1))}>Arttır</Button>
            <Button type='primary' onClick={() => setCounter(3)}>3</Button>
            </Space>
        </div>
    )
}

Redux

State

Context

Redux

Redux-Toolkit

export default function SampleState() {
    const [counter, setCounter] = useState(0);
    return useMemo(() =>  (
        console.log('render', counter),
        <div>
            <h1>UseMemo</h1>
            <h1>{counter}</h1>
            <Space>
            <Button type='primary' onClick={() => setCounter(state => (state + 1))}>Arttır</Button>
            <Button type='primary' onClick={() => setCounter(3)}>3</Button>
            </Space>
        </div>
    ), [counter])
}

State

State Management

Context

Redux

Mobx

vs...

State Management

Context

Redux

Mobx

vs...

Context

import React, { createContext } from 'react'

export  const TodoContext = createContext();

TodoContext.displayName = 'TodoContext';

export default function TodoProvider({children}) {
    const [todoList, setTodoList] = React.useState([
        {
            key: '3',
            task: 'lorem ipsum',
            statu: true,
          }
    ]);

    const [user, setUser] = React.useState(
        {
            name:'fatih',
            age:22
          }
    );

    const contextValue={
        todoList,
        user,
        setTodoList,
        setUser
    }
    
  return (
    <TodoContext.Provider value={contextValue}>
        {children}
    </TodoContext.Provider>
  )
}

Context

const TodoListArea = () => {
  const { todoList, user } = useContext(TodoContext);

  return useMemo(() => {
    console.log('inputArea');
    return (<div style={{ border: '1px solid lightGrey' }}>
    <code>
      <p>Todo List Context</p>
      {JSON.stringify(todoList, '\r')}
      <p>User Context</p>
      {JSON.stringify(user, '\r')}
    </code>
  </div>)}, [todoList, user]);
}

Context - Redux Farklılıkları

Hata yönetimi takibi (Redux Devtools-Logger)
Redux async/await yönetimi (thunk-saga)
3rd party bağımlılıklar
Community Desteği (Problemlerin Çözümü - Doküman)
Ekibin uyumlu çalışmasında fayda sağlaması
Popülerlik

Redux

Hata yönetimi takibi (Redux Devtools-Logger)
Redux async/await yönetimi (thunk-saga)
3rd party bağımlılıklar
Community Desteği (Problemlerin Çözümü - Doküman)
Ekibin uyumlu çalışmasında fayda sağlaması
Popülerlik

Action

Reducer

Store

View

Redux

Action

Reducer

Store

View

import React from 'react'
import { Provider } from 'react-redux';
import { applyMiddleware, compose, createStore } from 'redux'
import thunk from 'redux-thunk';
import { rootReducer } from './store/reducer';

export default function ProviderRedux({ children }) {

    const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;


    const store = createStore(
        rootReducer,
        composeEnhancer(
            compose,
            applyMiddleware(thunk),
        ),
    );

    return (
        <Provider store={store}>
            {children}
        </Provider>
    )
}

Redux- View

Action

Reducer

Store

View

import { increment, setTodo, setUser } from './store/action';

/...

const Counter = () => {
    const counter = useSelector(state => state.counter);
    const dispatch = useDispatch();
    return (console.log('renderCounter', counter),
        <>
            <h4>Counter</h4>
            <Button type='primary' onClick={() => dispatch(increment())}> INCREMENT </Button>
            <h1>{counter}</h1>
            <Row>
            </Row>
        </>
    )
}

Redux- Action

Action

Reducer

Store

View

// store/action.js

export const increment=() => {
    return {
        type: INCREMENT,
    }
}

Redux- Reducer & Store

Action

Reducer

Store

View

// store/reducer.js

const counter = (state = 0, action) => {
    switch (action.type) {
        case INCREMENT:
            return state + 1;
        case DECREMENT:
            return state - 1
        default:
            return state;
    }
};


export const rootReducer = combineReducers({
    //...
    counter,
});

Redux

Store

// store/reducer.js

const counter = (state = 0, action) => {
    switch (action.type) {
        case INCREMENT:
            return state + 1;
        case DECREMENT:
            return state - 1
        default:
            return state;
    }
};


export const rootReducer = combineReducers({
    //...
    counter,
});

Redux Optimizasyon

Store

İmmer.js

Redux Toolkit

Redux Optimizasyon

Store

İmmer.js

const user = (state = {
    name: 'fatih',
    age: 22
}, action) => {
    switch (action.type) {
        case SET_USER:
            return {
                ...state,
                name: action.payload
            }
        default:
            return state
    }
};

Redux Optimizasyon

Store

İmmer.js

const user = (state = {
    name: 'fatih',
    age: 22
}, action) => {
    switch (action.type) {
        case SET_USER:
            return {
                ...state,
                name: action.payload
            }
        default:
            return state
    }
};

const user = produce((draft, action) => {
    switch (action.type) {
        case SET_USER:
            draft.name = action.payload
            break;
        default:
            return draft;
    }

}, {
    name: 'fatih',
    age: 22
});

Redux Toolkit

Store

export default function ProviderReduxToolkit({ children }) {

    const store = configureStore({
        reducer: {
            counter: counterReducer
        },
    })

    return (
        <Provider store={store}>
            {children}
        </Provider>
    )
}

export default function ProviderRedux({ children }) {

    const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

    const store = createStore(
        rootReducer,
        composeEnhancer(
            compose,
            applyMiddleware(thunk),
        ),
    );

    return (
        <Provider store={store}>
            {children}
        </Provider>
    )
}

Redux Toolkit

Store

// store/features/counter
const counterSlice = createSlice({
  name: 'counter',
  initialState:0,
  reducers: {
    increment: (state) => {
      state += 1
    },
    decrement: (state) => {
      state -= 1
    },
    incrementByAmount: (state, action) => {
      state += action.payload
    },
  },
})

export const counterAction=counterSlice.actions;
export const counterReducer= counterSlice.reducer

// store/reducer.js

const counter = (state = 0, action) => {
    switch (action.type) {
        case INCREMENT:
            return state + 1;
        case DECREMENT:
            return state - 1
        default:
            return state;
    }
};

// store/action.js

export const increment=() => {
    return {
        type: INCREMENT,
    }
}

// store/actionType.js
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';

REDUX

By fatih emre

REDUX

More from fatih emre