演習⑫　React Nativeで、生のreduxで、action無しのreducer、storeを作成

App.jsと同列に、store.jsを作成する

（プロジェクト名）/store.js

import {texts as reducer} from './reducers/texts';
import {createStore} from 'redux';
import {Provider} from 'react-redux';

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

（プロジェクト名）/reducers/texts.js

const initialState = {
    text: 'Python'
}

export function texts(state = initialState){
    return state;
}

（プロジェクト名）/App.js

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import store from './store';
import {Provider} from 'react-redux';
 
・・・・・・・・・①

export default function App() {
  return (
    <Provider store={store}>
      <App style={styles.container}>　・・・②
        <Text>{store.getState().text}</Text>
        <StatusBar style="auto" />
      </App>
    </Provider>

  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

App.jsに store.jsの内容をまとめることもできます。

すなわち、①の部分に、

import {createStore} from 'redux';

import {Provider} from 'react-redux';

const store = createStore(reducer);

export default store;

を追記するということです。こうするとstore.jsがフォルダからなくなります。

②はあえてわかりやすいように記載してますが、通常は下記のとおりです。

<View style={styles.container}>　・・・②

<Text>{store.getState().text}</Text>

</View>

</Provider>