Как передать состояние по умолчанию для поставщика React global store от Laravel Blade? - PullRequest
Новая
       9

Как передать состояние по умолчанию для поставщика React global store от Laravel Blade?

0 голосов
/ 09 января 2020

Я настроил глобальное хранилище для своего приложения, используя React Context API, например: 

class App extends Component {
   render() {
      return (
        <SettingsProvider>
            <Items />
        </SettingsProvider>
      );
   }
}

render(<App />, document.getElementById('app'));

И провайдер mu выглядит примерно так: 

const defaultState = {test:'test'}

function SettingsProvider({children}) {
    const [state, dispatch] = React.useReducer(settingsReducer, defaultState);

    return (
        <SettingsContext.Provider value={{ state, dispatch }}>
            {children}
        </SettingsContext.Provider>
    )
}

Все работает как и ожидалось. Но теперь я хотел бы передать defaultState в SettingsProvider из Laravel, а не определять его в моем javascript, используя что-то вроде этого: 

<div id="app" defaultstate="{{$state}}"></div>

Но я не понял, как получить доступ к этим значения из моего SettingsProvider ... Как я могу реализовать это?

1 Ответ

0 голосов
/ 09 января 2020

React не знает о HTML атрибутах. Вам необходимо передать атрибут defaultState в шаблоне Blade в качестве реквизита для компонента App, а затем передать реквизит для компонента SettingsProvider.

App.jsx 

class App extends Component {
   render() {
      return (
        <SettingsProvider defaultState={this.props.defaultState}>
            <Items />
        </SettingsProvider>
      );
   }
}

if (document.getElementById('app')) {
    // find element by id
    const element = document.getElementById('app')

    // Get element's defaultState attribute
    const defaultState = element.getAttribute('defaultState')

    // render element
    render(<App defaultState={defaultState} />, element);
}

НастройкиProvider.jsx 

const initialState = {test:'test'}

function SettingsProvider({children, defaultState}) {
    const [state, dispatch] = React.useReducer(
        settingsReducer,
        //This will override initialState entries with the values you passed via Blade
        {
            ...initialState,
            ...defaultState
        }
    );

    return (
        <SettingsContext.Provider value={{ state, dispatch }}>
            {children}
        </SettingsContext.Provider>
    )
}
...