@connecthoạt động tuyệt vời khi tôi đang cố gắng truy cập vào cửa hàng trong một thành phần phản ứng. Nhưng làm thế nào tôi nên truy cập nó trong một số mã khác. Ví dụ: giả sử tôi muốn sử dụng mã thông báo ủy quyền để tạo phiên bản axios có thể được sử dụng trên toàn cầu trong ứng dụng của mình, cách tốt nhất để đạt được điều đó là gì?

Đây là của tôi 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

Bây giờ tôi muốn truy cập một điểm dữ liệu từ cửa hàng của mình, đây là giao diện nếu tôi cố tìm nạp nó trong một thành phần phản ứng bằng cách sử dụng @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() {...}
}

Bất kỳ hiểu biết hoặc mô hình quy trình công việc ra khỏi đó?

Xuất cửa hàng từ mô-đun bạn gọi createStorevới. Sau đó, bạn được đảm bảo rằng cả hai sẽ được tạo và sẽ không gây ô nhiễm không gian cửa sổ toàn cầu.

MyStore.js

const store = createStore(myReducer);
export store;

hoặc là

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

MyClient.js

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

hoặc nếu bạn sử dụng mặc định

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

Đối với nhiều trường hợp sử dụng

Nếu bạn cần nhiều phiên bản của một cửa hàng, hãy xuất một hàm xuất xưởng. Tôi sẽ khuyên bạn nên làm nó async(trả lại a promise).

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

Trên máy khách (trong một asynckhối)

import {getUserStore} from './store'

const joeStore = await getUserStore('joe')

Tìm thấy một giải pháp. Vì vậy, tôi nhập cửa hàng trong ứng dụng api của tôi và đăng ký vào đó. Và trong chức năng trình nghe đó, tôi đặt mặc định toàn cầu của axios với mã thông báo mới được tìm nạp.

Đây là những gì mới của tôi api.jstrông như:

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

Có lẽ nó có thể được cải thiện hơn nữa, vì hiện tại nó có vẻ hơi không phù hợp. Những gì tôi có thể làm sau này là thêm một phần mềm trung gian vào cửa hàng của tôi và đặt mã thông báo sau đó ở đó.

Bạn có thể sử dụng stoređối tượng được trả về từ createStorehàm (vốn đã được sử dụng trong mã của bạn khi khởi tạo ứng dụng). Hơn bạn có thể sử dụng đối tượng này để có được trạng thái hiện tại với store.getState()phương thức hoặc store.subscribe(listener)đăng ký để lưu trữ các bản cập nhật.

Bạn thậm chí có thể lưu đối tượng này vào thuộc windowtính để truy cập nó từ bất kỳ phần nào của ứng dụng nếu bạn thực sự muốn nó ( window.store = store)

Thông tin thêm có thể được tìm thấy trong tài liệu Redux .

Có vẻ như Middlewarelà con đường để đi.
Tham khảo tài liệu chính thức và vấn đề này trên repo của họ

Giống như @sanchit đề xuất phần mềm trung gian là một giải pháp tốt nếu bạn đã xác định thể hiện axios của mình trên toàn cầu.

Bạn có thể tạo một phần mềm trung gian như:

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;

Và sử dụng nó như thế này:

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

Nó sẽ đặt mã thông báo cho mọi hành động nhưng bạn chỉ có thể lắng nghe các hành động thay đổi mã thông báo chẳng hạn.

Đối với TypeScript 2.0, nó sẽ trông như thế này:

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

Có thể hơi muộn nhưng tôi nghĩ cách tốt nhất là sử dụng axios.interceptorsnhư dưới đây. Nhập url có thể thay đổi dựa trên thiết lập dự án của bạn.

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

Làm điều đó với móc. Tôi gặp phải một vấn đề tương tự, nhưng tôi đang sử dụng Reac-redux với hook. Tôi không muốn làm mất mã giao diện của mình (nghĩa là các thành phần phản ứng) với rất nhiều mã dành riêng để truy xuất / gửi thông tin từ / đến cửa hàng. Thay vào đó, tôi muốn các hàm có tên chung để lấy và cập nhật dữ liệu. Con đường của tôi là đặt ứng dụng

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

vào một mô-đun được đặt tên store.jsvà thêm exporttrước đó constvà thêm các lần nhập phản ứng-redux thông thường trong store.js. tập tin. Sau đó, tôi đã nhập vào index.jsở cấp ứng dụng, sau đó tôi đã nhập vào index.js với các import {store} from "./store.js"thành phần con thông thường sau đó truy cập vào cửa hàng bằng cách sử dụng useSelector()và useDispatch()hook.

Để truy cập vào cửa hàng theo mã mặt trước không phải thành phần, tôi đã sử dụng nhập tương tự (nghĩa là import {store} from "../../store.js"), sau đó sử dụng store.getState()và store.dispatch({*action goes here*})để xử lý truy xuất và cập nhật (er, gửi hành động đến) cửa hàng.

Một cách dễ dàng để có quyền truy cập vào mã thông báo, là đặt mã thông báo vào LocalStorage hoặc AsyncStorage với React Native.

Dưới đây là một ví dụ với dự án 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;
  }
};
...

và 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 };

Đối với web, bạn có thể sử dụng Window.localStoragethay vì AsyncStorage