Redux

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

State Management

State Management

State Management

State Management

State Management

State Management

State Management

State Management

State Management

State Management

State Management

State Management

State Management

State Management

State Management

State Management

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';
Made with Slides.com