solve some problems with async redux

App.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import {Provider} from 'react-redux';
-import StartScreen from './src/components/start-screen';
+import StartScreen from './src/components/main-component';
 import store from './src/store';
-const App = () => {
+const App = props => {
   return (
     <Provider store={store}>
       <StartScreen />

src/actions/anki-get-actions.js

@@ -7,27 +7,56 @@ import {
   GET_MODEL_LIST,
   REQUEST_PERMISSIONS,
 } from '../constants/anki-constants';
+import {getPermissionName} from 'react-native-ankidroid/dist/utilities';
 
-export const requestAnkiPermissions = async (
-  ankiProvider = AnkiDroid.requestPermission,
-) => {
-  const [err, res] = await ankiProvider();
-  const permission = res === 'granted';
-  return err ? {type: ERROR, err} : {type: REQUEST_PERMISSIONS, permission};
+/*Permissions*/
+
+const setRequestAnkiPermissions = (err, res) => {
+  return err
+    ? {type: ERROR, err}
+    : {type: REQUEST_PERMISSIONS, payload: res === 'granted'};
+};
+export const requestAnkiPermission = () => async dispatch => {
+  try {
+    const [err, res] = await AnkiDroid.requestPermission();
+    if (err) throw err;
+    console.log(res);
+    await dispatch(setRequestAnkiPermissions(err, res));
+    return res;
+  } catch (err) {
+    console.log(err);
+  }
 };
 
 export const checkAnkiAccess = async (
   ankiApiProvider = AnkiDroid.isApiAvailable,
 ) => {
   const [err, res] = await ankiApiProvider();
+  console.log(res, 'result');
   return err ? {type: ERROR, err} : {type: CHECK_ANKI_ACCESS, payload: res};
 };
 
-export const getDeckList = async (
-  getDeckListFunction = AnkiDroid.getDeckList,
-) => {
-  const [err, res] = await getDeckListFunction();
-  return err ? {type: ERROR, err} : {type: GET_DECK_LIST, payload: res};
+/*Anki Data*/
+
+const setDeckList = deckList => {
+  return {
+    type: GET_DECK_LIST,
+    payload: deckList,
+  };
+};
+
+export const getDeckList = () => async dispatch => {
+  try {
+    const [err, deckList] = await AnkiDroid.getDeckList();
+    if (err) {
+      console.log('you have an error');
+      throw err;
+    }
+    await dispatch(setDeckList(deckList));
+    return deckList;
+  } catch (err) {
+    console.log(err);
+  }
 };
 
 export const getModelList = async (
@@ -44,3 +73,5 @@ export const getFieldList = async (
   const [err, res] = await getFieldListFunction(id);
   return err ? {type: ERROR, err} : {type: GET_FIELD_LIST, payload: res};
 };
+
+export const dd = () => {};

src/components/add-word-form.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import {connect} from 'react-redux'
+import DeckPicker from './view/deck-picker';
+import{Form} from 'native-base';
+
+const AddWordForm = props => {
+    return (
+       <Form>
+           <DeckPicker/>
+       </Form>
+    )
+}
+
+export default connect()(AddWordForm)

src/components/main-component.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {Container, Text} from 'native-base';
+import {ScrollView} from 'react-native'
+import Permissions from './permissions';
+import {connect, Provider} from 'react-redux';
+import DeckPicker from './view/deck-picker';
+import AddWordForm from './add-word-form';
+
+const StartScreen = props => {
+    return (
+        <ScrollView>
+            {!props.ankiAvailable? <Permissions /> : null}
+                <AddWordForm/>
+        </ScrollView>
+    )
+};
+
+export default connect(state => ({
+    ankiAvailable: state.anki.appHasAccess,
+}))(StartScreen);

src/components/permissions.js

@@ -0,0 +1,20 @@
+import React, {useState, useEffect} from 'react';
+import {Text, Button} from 'native-base';
+import {connect} from 'react-redux';
+import {requestAnkiPermission} from '../actions/anki-get-actions';
+const Permissions = props => {
+  useEffect(() => {
+    props.requestAnkiPermission();
+  }, []);
+  return (
+    <Button onPress={() => requestAnkiPermission()}>
+      <Text>Request access</Text>
+    </Button>
+  );
+};
+export default connect(
+  state => ({
+    // ankiAccess: state.anki.isApiAvailable,
+  }),
+  {requestAnkiPermission: requestAnkiPermission},
+)(Permissions);

src/components/start-screen.jsx

@@ -1,8 +0,0 @@
-import React from 'react';
-import {Container, Text} from 'native-base';
-
-const StartScreen = props => {
-  return <Text>world , УХТЫ БЛЯ</Text>;
-};
-
-export default StartScreen;

src/components/view/deck-picker.jsx

@@ -0,0 +1,29 @@
+import React, {useEffect, useState} from 'react'
+import {connect} from 'react-redux'
+import {Picker, Text} from 'native-base'
+import { getDeckList} from '../../actions/anki-get-actions';
+import {selectDeck} from '../../actions/anki-set-actions';
+
+const DeckPicker = props => {
+    const [deckList, setDeckList] = useState([{name: "no decks", id:"666"}])
+    const [selectedDeck, setSelectedDeck] = useState('1')
+    useEffect(() => {
+        props.getDeckList()
+        setDeckList(props.decks)
+    }, [])
+    return (
+        <Picker note mode={'dropdown'} onValueChange={id => setSelectedDeck(id)} selectedValue={selectedDeck} >
+            {deckList.map(deck => (
+                <Picker.Item label={deck.name} key={deck.id}/>
+            ))}
+        </Picker>
+    )
+}
+
+export default connect(state => ({
+    decks: state.anki.deckList,
+    selectedDeck: state.anki.selectedDeck
+}),{
+    getDeckList,
+    setDeck: selectDeck
+})(DeckPicker)

src/reducers/anki-reducer.js

@@ -1,13 +1,27 @@
+import {
+  GET_DECK_LIST,
+  REQUEST_PERMISSIONS,
+  SET_DECK,
+} from '../constants/anki-constants';
+
 const initialState = {
   isApiAvailable: false,
-  isAnkiConnected: false,
+  appHasAccess: false,
   deckList: [],
+  selectedDeck: '0',
   mainFieldIsAvailable: false,
   fieldList: [],
 };
 
 const ankiReducer = (state = initialState, action) => {
   switch (action.type) {
+    case REQUEST_PERMISSIONS:
+      console.log(action.payload);
+      return {...state, appHasAccess: action.payload};
+    case GET_DECK_LIST:
+      return {...state, deckList: action.payload};
+    case SET_DECK:
+      return {...state, selectedDeck: action.payload};
     default:
       return state;
   }

src/reducers/main-reducer.js

@@ -3,8 +3,8 @@ import ankiReducer from './anki-reducer';
 import apiReducer from './api-reducer';
 
 const mainReducer = combineReducers({
-  ankiReducer,
-  apiReducer,
+  anki: ankiReducer,
+  api: apiReducer,
 });
 
 export default mainReducer;

src/store.js

@@ -1,10 +1,11 @@
 import {createStore, applyMiddleware} from 'redux';
 import {composeWithDevTools} from 'redux-devtools-extension';
+import thunk from 'redux-thunk';
 import mainReducer from './reducers/main-reducer'; //your reducer
 
 const composeEnhancers = composeWithDevTools({realtime: true, port: 8081}); //possible to run without arguments
 const store = createStore(
   mainReducer,
-  /* preloadedState, */ composeEnhancers(/*connect of middelwares*/),
+  composeEnhancers(applyMiddleware(thunk)),
 );
 export default store;