Итак, первое, что нужно понять, это Redux Cycle :
Action Creator -> Action -> dispatch -> Reducers -> State
Создатель действия : Создатель действия - это функция, которая собирается создать или вернуть простой объект JavaScript, известный как Действие со свойством type и *Свойство 1014 *, которое описывает некоторые изменения, которые вы хотите внести в свои данные.
Свойство payload описывает некоторый контекст вокруг изменения, которое мы хотим внести.
Цель Действие предназначено для описания некоторых изменений данных в нашем приложении.
Создатель действий предназначен для создания Действие .
.Функция dispatch будет принимать Действие , делать копии этого объекта и передавать его множеству различных мест внутри нашего приложения, что приводит нас к Редукторам .
В Redux редуктор - это функция, отвечающая за принятие Actион .Он собирается обработать это Action , внести некоторые изменения в данные и вернуть их, чтобы их можно было централизовать в каком-то месте.
В Redux свойство State центральное хранилище всей информации, производимой нашими редукторами .Вся информация консолидируется внутри объекта State , поэтому наше приложение React может легко добраться до нашей стороны приложения Redux и получить доступ ко всем данным внутри приложения.
Таким образом, таким образомприложению не нужно обходить каждый отдельный редуктор и запрашивать текущее состояние .
Так что переварите это на пару минут, а затем посмотрите на свою архитектуру.
Давайте перейдем к редукторам .
Редукторы вызываются с помощью Действие , созданного Создатель действий .Редуктор рассмотрит это Действие и решит, нужно ли ему модифицировать некоторые данные на основе этого Действие .
Итак, другими словами, работаРедуктор предназначен не для выполнения запросов API, а для обработки действий, отправленных ему создателем действия.
Поэтому вместо этого:
import { Map } from 'immutable';
import actions from './actions';
import { adalApiFetch } from '../../adalConfig';
const initState = new Map({
tenantId: ''
});
export default function(state = initState, action) {
switch (action.type) {
case actions.SET_TENANT_ACTIVE:
{
const options = {
method: 'post'
};
adalApiFetch(fetch, "/Tenant/SetTenantActive?TenantName="+state.tenantId, options)
.then(response =>{
if(response.status === 200){
console.log("Tenant activated");
}else{
throw "error";
}
})
.catch(error => {
console.error(error);
});
return state.set('tenant', state.Name);
}
default:
return state;
}
}
Ваш редуктор должен выглядеть примерно так:
import { SET_TENANT_ACTIVE } from "../actions/types";
const initialState = {
tenantId: ''
};
export default (state = initialState, action) {
switch (action.type) {
case SET_TENANT_ACTIVE:
return {...state, [action.payload.id]: action.payload };
default:
return state;
}
}
Тогда внутри вашего файла создателей действий у вас должен быть создатель действий, который выглядит примерно так:
import axios from 'axios';
import { SET_TENANT_ACTIVE } from "../actions/types";
export const setTenant = id => async (dispatch) => {
const response = await axios.post(`/tenants/${id}`);
dispatch({ type: SET_TENANT_ACTIVE, payload: response.data });
};
Вам также нужно узнать о структуре проекта Redux, потому что после вышеупомянутого рефакторинга выне хватает, как подключить все это к вашему компоненту.В вашем компонентном файле нет функции connect(), для которой также требуется тег Provider, а у вас его нет.
Поэтому для этого я рекомендую прежде всего настроить папку и структуру файла следующим образом.:
/src
/actions
/components
/reducers
index.js
Итак, внутри вашего index.js файла он должен выглядеть примерно так:
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore, applyMiddleware, compose } from "redux";
import reduxThunk from "redux-thunk";
import App from "./components/App";
import reducers from "./reducers";
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducers,
composeEnhancers(applyMiddleware(reduxThunk))
);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.querySelector("#root")
Итак, ваша цель - убедиться, что вы получите этот тег Provider всамый верх вашей иерархии компонентов и убедитесь, что вы передаете ему ссылку на свое хранилище Redux, в которое загружаются все редукторы .
Итак, выше я создал хранилище и передал егонаш набор редукторов, и он вернет вам все ваши приложения State .
Наконец, вы видите выше, я создал экземпляр <Provider> и обернул компонент <App />с ним, а затем вы хотите передать <Provider> компонент является одной опорой под названием store.store - это результат вызова createStore() и вызова reducers.
* <Provider> - это то, что взаимодействует с Redux store от нашего имени.
Обратите внимание, я также подключил Redux-Thunk, о котором упоминал Дж. Хестерс. Насколько я вижу из вашего кода, вы делаете запрос ajax, поэтому я предложил вам асинхронный создатель действий, а это значит, что вынужен Redux-Thunk или какое-нибудь промежуточное ПО, позвольте мне не оскорблять фанатов Redux-Saga, так что у вас есть, по крайней мере, эти два варианта.Вы, кажется, относительно новичок в Redux, просто используйте Redux-Thunk.
Теперь вы можете использовать компонент connect() внутри вашего файла компонентов, чтобы завершить подключение этих создателей действий и редукторов к вашему компоненту или вашей стороне React.приложение.
import React, { Component } from 'react';
import { connect } from "react-redux";
import { Table, Radio} from 'antd';
import { adalApiFetch } from '../../adalConfig';
import Notification from '../../components/notification';
import actions from '../../redux/activetenant/actions';
После импорта connect создайте его экземпляр ниже:
export default connect()(ListTenants);
Пожалуйста, не спорьте со мной по поводу приведенного выше синтаксиса (на самом деле бывший студент сообщил обо мне администраторам за использование этого синтаксиса в качестве доказательства того, что я не знаю, что я делаю ).
Затем вам нужно настроить этот connect() компонент React, добавив mapStateToProps, есливам это понадобится, но обязательно укажите actions в качестве второго аргумента connect().Если вы понимаете, что вам не нужно mapStateToProps, просто передайте null в качестве первого аргумента, но вы не можете оставить его пустым.
Надеюсь, все это было полезно и добро пожаловать в удивительный мирReact-Redux.