@connectbir tepki bileşeninde mağazaya erişmeye çalıştığımda harika çalışıyor. Ancak başka bir kod parçasında nasıl erişmeliyim. Örneğin: diyelim ki, uygulamamda global olarak kullanılabilecek axios örneğimi oluşturmak için bir yetkilendirme belirteci kullanmak istiyorum, bunu başarmanın en iyi yolu nedir?

Bu benim api.js

// tooling modules
import axios from 'axios'

// configuration
const api = axios.create()
api.defaults.baseURL = 'http://localhost:5001/api/v1'
api.defaults.headers.common['Authorization'] = 'AUTH_TOKEN' // need the token here
api.defaults.headers.post['Content-Type'] = 'application/json'

export default api

Şimdi mağazamdan bir veri noktasına erişmek istiyorum, işte bir tepki bileşeni içinde onu almaya çalışsaydım şöyle görünüyordu @connect

// connect to store
@connect((store) => {
  return {
    auth: store.auth
  }
})
export default class App extends Component {
  componentWillMount() {
    // this is how I would get it in my react component
    console.log(this.props.auth.tokens.authorization_token) 
  }
  render() {...}
}

Herhangi bir içgörü veya iş akışı paterni var mı?

Mağazayı, aradığınız modülden dışa aktarın createStore. O zaman ikisinin de yaratılacağından ve küresel pencere alanını kirletmeyeceğinden emin olabilirsiniz.

MyStore.js

const store = createStore(myReducer);
export store;

veya

const store = createStore(myReducer);
export default store;

MyClient.js

import {store} from './MyStore'
store.dispatch(...)

veya varsayılanı kullandıysanız

import store from './MyStore'
store.dispatch(...)

Çoklu Mağaza Kullanım Durumları için

Bir mağazanın birden fazla örneğine ihtiyacınız varsa, fabrika işlevini dışa aktarın. async(A dönen promise) yapma tavsiye ederim .

async function getUserStore (userId) {
   // check if user store exists and return or create it.
}
export getUserStore

İstemcide (bir asyncblokta)

import {getUserStore} from './store'

const joeStore = await getUserStore('joe')

Bir çözüm buldum. Bu yüzden api util benim mağaza almak ve orada abone. Ve bu dinleyici fonksiyonunda, yeni getirilen jetonumla aksiyomların global varsayılanlarını ayarladım.

Bu benim yeni api.jsgibi görünüyor:

// tooling modules
import axios from 'axios'

// store
import store from '../store'
store.subscribe(listener)

function select(state) {
  return state.auth.tokens.authentication_token
}

function listener() {
  let token = select(store.getState())
  axios.defaults.headers.common['Authorization'] = token;
}

// configuration
const api = axios.create({
  baseURL: 'http://localhost:5001/api/v1',
  headers: {
    'Content-Type': 'application/json',
  }
})

export default api

Belki daha da geliştirilebilir, çünkü şu anda biraz yetersiz görünüyor. Daha sonra yapabileceğim mağazama bir ara katman eklemek ve jetonu oraya oraya ayarlamak.

Kullanabilirsiniz store döndürülen nesneyicreateStore (uygulama başlatma işleminde kodunuzda zaten kullanılmalıdır). Daha sonra bu nesneyi store.getState()yöntemle geçerli durumu almak veya store.subscribe(listener)güncellemeleri depolamak için kullanabilirsiniz.

Gerçekten isterseniz, bu nesneyi windowuygulamanın herhangi bir bölümünden erişmek için özelliğe de kaydedebilirsiniz ( window.store = store)

Daha fazla bilgi Redux belgelerinde bulunabilir .

Gidilecek Middlewareyol gibi görünüyor . Repolarında resmi belgelere ve bu konuya
bakın

@Sanchit önerdi gibi güzel bir çözüm ara yazılımdır eğer zaten global AXIOS örneğini tanımlıyorsanız.

Aşağıdaki gibi bir ara katman yazılımı oluşturabilirsiniz:

function createAxiosAuthMiddleware() {
  return ({ getState }) => next => (action) => {
    const { token } = getState().authentication;
    global.axios.defaults.headers.common.Authorization = token ? `Bearer ${token}` : null;

    return next(action);
  };
}

const axiosAuth = createAxiosAuthMiddleware();

export default axiosAuth;

Ve şu şekilde kullanın:

import { createStore, applyMiddleware } from 'redux';
const store = createStore(reducer, applyMiddleware(axiosAuth))

Simgeyi her eylemde ayarlayacaktır, ancak yalnızca jetonu değiştiren eylemleri dinleyebilirsiniz.

TypeScript 2.0 için şöyle görünecektir:

MyStore.ts

export namespace Store {

    export type Login = { isLoggedIn: boolean }

    export type All = {
        login: Login
    }
}

import { reducers } from '../Reducers'
import * as Redux from 'redux'

const reduxStore: Redux.Store<Store.All> = Redux.createStore(reducers)

export default reduxStore;

MyClient.tsx

import reduxStore from "../Store";
{reduxStore.dispatch(...)}

Biraz geç olabilir ama en iyi yol axios.interceptorsaşağıdaki gibi kullanmak olduğunu düşünüyorum . İçe aktarma URL'leri proje kurulumunuza göre değişebilir.

index.js

import axios from 'axios';
import setupAxios from './redux/setupAxios';
import store from './redux/store';

// some other codes

setupAxios(axios, store);

setupAxios.js

export default function setupAxios(axios, store) {
    axios.interceptors.request.use(
        (config) => {
            const {
                auth: { tokens: { authorization_token } },
            } = store.getState();

            if (authorization_token) {
                config.headers.Authorization = `Bearer ${authorization_token}`;
            }

            return config;
        },
       (err) => Promise.reject(err)
    );
}

Kanca ile yapıyorum. Benzer bir sorunla karşılaştım, ama kancalarla tepki-redux kullanıyordum. Arayüzü / mağazadan bilgi alma / gönderme için adanmış kod bir sürü ile benim arayüz kodu (yani, tepki bileşenleri) kadar lard istemedim. Bunun yerine, genel adlara sahip işlevlerin verileri alıp güncellemesini istedim. Benim yolum uygulamanın

const store = createSore(
   allReducers,
   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );

daha önce adlandırılan store.jsve ekleyen ve store.js'deki olağan tepki-redux ithalatını ekleyen bir modüle dönüştürün . dosya. Daha sonra, uygulama düzeyinde içeri aktardım, daha sonra her zamanki alt öğelerle index.js'ye içe aktardım. Alt bileşenler daha sonra ve kancalarını kullanarak mağazaya erişti .exportconstindex.jsimport {store} from "./store.js"useSelector()useDispatch()

Bileşen olmayan ön uç kodundaki mağazaya erişmek için, benzer içe aktarma (yani import {store} from "../../store.js") kullandım store.getState()ve sonra store.dispatch({*action goes here*})depoya alma ve güncelleme (er, eylem gönderme) işlemlerini gerçekleştirdim.

Jetona erişmenin kolay bir yolu, jetonu LocalStorage veya Reac Native ile AsyncStorage'a koymaktır.

React Native projesine sahip bir örnek aşağıda

authReducer.js

import { AsyncStorage } from 'react-native';
...
const auth = (state = initialState, action) => {
  switch (action.type) {
    case SUCCESS_LOGIN:
      AsyncStorage.setItem('token', action.payload.token);
      return {
        ...state,
        ...action.payload,
      };
    case REQUEST_LOGOUT:
      AsyncStorage.removeItem('token');
      return {};
    default:
      return state;
  }
};
...

ve api.js

import axios from 'axios';
import { AsyncStorage } from 'react-native';

const defaultHeaders = {
  'Content-Type': 'application/json',
};

const config = {
  ...
};

const request = axios.create(config);

const protectedRequest = options => {
  return AsyncStorage.getItem('token').then(token => {
    if (token) {
      return request({
        headers: {
          ...defaultHeaders,
          Authorization: `Bearer ${token}`,
        },
        ...options,
      });
    }
    return new Error('NO_TOKEN_SET');
  });
};

export { request, protectedRequest };

Web Window.localStorageiçin AsyncStorage yerine kullanabilirsiniz