@connectberfungsi dengan baik ketika saya mencoba mengakses toko dalam komponen reaksi. Tetapi bagaimana saya harus mengaksesnya dalam beberapa kode lainnya. Sebagai contoh: katakanlah saya ingin menggunakan token otorisasi untuk membuat contoh aksioma saya yang dapat digunakan secara global di aplikasi saya, apa cara terbaik untuk mencapainya?

Ini milik saya 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

Sekarang saya ingin mengakses titik data dari toko saya, di sini akan terlihat seperti apa jika saya mencoba mengambilnya dalam komponen reaksi menggunakan @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() {...}
}

Adakah wawasan atau pola alur kerja di luar sana?

Ekspor toko dari modul yang Anda panggil createStore. Maka Anda yakin itu akan dibuat dan tidak akan mencemari ruang jendela global.

MyStore.js

const store = createStore(myReducer);
export store;

atau

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

MyClient.js

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

atau jika Anda menggunakan default

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

Untuk Berbagai Kasus Penggunaan Toko

Jika Anda membutuhkan beberapa instance toko, ekspor fungsi pabrik. Saya akan merekomendasikan membuatnya async(mengembalikan a promise).

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

Di klien (di asyncblok)

import {getUserStore} from './store'

const joeStore = await getUserStore('joe')

Menemukan solusi. Jadi saya mengimpor toko di util api saya dan berlangganan di sana. Dan dalam fungsi pendengar itu saya menetapkan default global aksioma dengan token yang baru saya ambil.

Seperti inilah api.jspenampilan baru saya :

// 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

Mungkin bisa lebih ditingkatkan lagi, karena saat ini sepertinya agak tidak elok. Yang bisa saya lakukan nanti adalah menambahkan middleware ke toko saya dan mengatur token di sana-sini.

Anda dapat menggunakan storeobjek yang dikembalikan dari createStorefungsi (yang seharusnya sudah digunakan dalam kode Anda dalam inisialisasi aplikasi). Daripada Anda dapat menggunakan objek ini untuk mendapatkan keadaan saat ini dengan store.getState()metode atau store.subscribe(listener)untuk berlangganan pembaruan toko.

Anda bahkan dapat menyimpan objek ini ke windowproperti untuk mengaksesnya dari bagian mana pun dari aplikasi jika Anda benar-benar menginginkannya ( window.store = store)

Info lebih lanjut dapat ditemukan di dokumentasi Redux .

Sepertinya Middlewarecara untuk pergi.
Lihat dokumentasi resmi dan masalah ini di repo mereka

Seperti @sanchit yang diusulkan middleware adalah solusi yang bagus jika Anda sudah mendefinisikan instance aksioma Anda secara global.

Anda dapat membuat middleware seperti:

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;

Dan gunakan seperti ini:

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

Ini akan mengatur token pada setiap tindakan tetapi Anda hanya bisa mendengarkan tindakan yang mengubah token misalnya.

Untuk TypeScript 2.0 akan terlihat seperti ini:

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(...)}

Mungkin agak terlambat tetapi saya pikir cara terbaik adalah menggunakan axios.interceptorsseperti di bawah ini. Impor url dapat berubah berdasarkan pengaturan proyek Anda.

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)
    );
}

Melakukannya dengan kait. Saya mengalami masalah yang sama, tetapi saya menggunakan react-redux with hooks. Saya tidak ingin menambahkan kode antarmuka saya (yaitu, komponen reaksi) dengan banyak kode yang didedikasikan untuk mengambil / mengirim informasi dari / ke toko. Sebaliknya, saya ingin fungsi dengan nama generik untuk mengambil dan memperbarui data. Jalan saya adalah menempatkan aplikasi

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

ke dalam modul bernama store.jsdan menambahkan exportsebelumnya constdan menambahkan impor reak-reduks yang biasa di store.js. mengajukan. Kemudian, saya mengimpor ke index.jstingkat aplikasi, yang kemudian saya impor ke index.js dengan import {store} from "./store.js"komponen anak biasa kemudian mengakses toko menggunakan useSelector()dan useDispatch()kait.

Untuk mengakses toko dalam kode ujung depan non-komponen, saya menggunakan impor analog (yaitu, import {store} from "../../store.js") dan kemudian digunakan store.getState()dan store.dispatch({*action goes here*})untuk menangani pengambilan dan pembaruan (eh, mengirim tindakan ke) toko.

Cara mudah untuk memiliki akses ke token, adalah dengan meletakkan token di LocalStorage atau AsyncStorage dengan React Native.

Di bawah ini adalah contoh dengan proyek React Native

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;
  }
};
...

dan 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 };

Untuk web, Anda bisa menggunakan Window.localStorageAsyncStorage