web-dev-qa-db-ja.com

React Nativeのグローバル状態

私はReact Nativeアプリケーションを開発しています。

ログインしているユーザーのユーザーIDを保存し、そのユーザーがすべてのコンポーネントにログインしているかどうかを確認します。

私が探しているのは、クッキー、セッション、またはグローバルな状態のようなものです。

Reduxを使用する必要があることを読みましたが、これは非常に複雑であるようであり、react-navigation。ほぼすべてのアクションとリデューサーを定義する必要がありますが、必要なのは、すべてのコンポーネントの単一のグローバル状態/変数にアクセスできることだけです。

代替手段はありますか、Reduxを使用するためにアプリ全体を再構築する必要がありますか？

javascriptreactjsreact-nativereduxreact-redux
12
Jamgreen

私は通常、以下を含むglobal.jsを作成します。

module.exports = {
   screen1: null,
};

そして、画面上の状態の値を取得します

import GLOBAL from './global.js'

render() {

    GLOBAL.screen1 = this;

}

これで、次のようにどこでも使用できます。

GLOBAL.screen1.setState({
    var: value
});
12
Raphael Estrada

私は通常、このようなグローバルを行います：

Globals.jsを作成します

_module.exports = {
  USERNAME: '',
};
_

ユーザー名を保存するためにそのような何かをしたら、インポートする必要があります：

_GLOBAL = require('./globals');
_

また、データを保存する場合は、ユーザー名を保存するだけでよいと言えます。

_var username = 'test';
GLOBAL.USERNAME = username;
_

そして、あなたは行き​​ます、あなたはちょうどあなたが望むページでGLOBALをインポートしてそれを使用する必要があります、ただif (GLOBAL.username == 'teste')を使用してください。

1
Brunaine

ここに私がそれを達成するために使用した簡単なロジックがあります...

App.js

const globalState={};
import React from "react";
import Setup from "./src/boot/setup";

export const StoreGlobal = (obj)=> {

  if(obj.type==='set'){
  globalState[obj.key]=obj.value;
  return true;
  }else
    if(obj.type==='get'){
  return globalState[obj.key];
  }else{
  return null;
  }

}

export default class App extends React.Component {
  render() {
    return <Setup />;
  }
}

次に、どこにでもインポートして、データ文字列を取得および保存します。

import { StoreGlobal } from '../../../App';


    StoreGlobal({type:'set',key:'ok',value:'cool'})

    alert(StoreGlobal({type:'get',key:'ok'}))
0
General Omosco

React 16.8.0（2019年2月6日）フックの導入以降）で更新

MobxやReduxなどの外部ライブラリを使用することは必須ではありません。 （フックが導入される前に、この状態管理ソリューションの両方を使用しました）

10行だけでグローバル状態を作成できます[ソース] [1]

import React, {createContext, useContext, useReducer} from 'react';
export const StateContext = createContext();
export const StateProvider = ({reducer, initialState, children}) =>(
  <StateContext.Provider value={useReducer(reducer, initialState)}>
    {children}
  </StateContext.Provider>
);
export const useStateValue = () => useContext(StateContext);

グローバル状態でアプリを拡張する

import { StateProvider } from '../state';

const App = () => {
  const initialState = {
    theme: { primary: 'green' }
  };

  const reducer = (state, action) => {
    switch (action.type) {
      case 'changeTheme':
        return {
          ...state,
          theme: action.newTheme
        };

      default:
        return state;
    }
  };


  return (
    <StateProvider initialState={initialState} reducer={reducer}>
        // App content ...
    </StateProvider>
  );
}

For details explanation I recommend to read this wonderful [medium][1] 


  [1]: https://medium.com/simply/state-management-with-react-hooks-and-context-api-at-10-lines-of-code-baf6be8302c
0
Chotala Paresh