Приложение React Setup React с Redux Store

Шаг 1: Создать приложение React

NPX Create-React-App My-App

CD My-App

Шаг 2: Instal Redux, React Redux & Redux Thunk с следующим CMD

NPM Установка Рукс

NPM Установка React-Redux

NPM Установите Redux-Thunk

Шаг 3: Создать Reducers/Reducer.js в src

Добавьте код, как показано ниже в Reducer.js:

const initialState = {
   name:prathamesh
}

function reducer(state = initialState, action) {
    switch (action.type) {
        case 'SET_CHECKED':
            return {
                ...state,
                name:action.payload.name
            }
            break;

        default:
            return state;
            break;
    }
}

export default reducer;

Шаг 4: Время подключения магазина Open SRC/Index.js & Import

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

Затем внесите изменения, как ниже

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer,composeEnhancers(
  applyMiddleware(thunk),
));

ReactDOM.render(
  
  
    
  
  ,
  document.getElementById('root')
);

Это подключит наш магазин к приложению с React Devtool.

Шаг 5: Подключите любой компонент к хранению

import React, { Component } from 'react'
import { connect } from 'react-redux'

class Check extends Component {

    render() {
        return (
            
               {this.props.name}
            
        )
    }
}

const mapStateToProps  = state => {
    return {
        isChecked : state.name
    }
}

export default connect(mapStateToProps,null)(Check);

Выше представляет собой компонент с именем Check, где мы подключили хранилище с функцией подключения внизу, которую мы импортировали из React-Redux, и мы можем получить доступ к состоянию с помощью MapStateToprops.

Оригинал: “https://dev.to/pratham0182/setup-react-app-with-redux-store-ac”

{this.props.name}

Читайте ещё по теме: