Is there any way to integrate redux with aws-appsync in react-native?
If there is can you give me hint or clue on how to do it? I'm having a hard time integrating it. Thank you in advance.
I think you should be able to connect your own redux store as is detailed in their documentation. Basically create your own and use connect(mapStateToProps, mapDispatchToProps) from react-redux to connect your components.
const MyComponent = props => <h1>HI!</h1>
const ReduxConnected = connect(mapStateToProps, mapDispatchToProps)(MyComponent)
const GraphQLConnected = graphql(gql`query { hi }`)(ReduxConnected)
And then at the root of your application have
import AWSAppSyncClient from "aws-appsync";
import { Provider as ReduxProvider } from 'react-redux'
import { graphql, ApolloProvider } from 'react-apollo';
import { Rehydrated } from 'aws-appsync-react';
import { createStore } from 'redux'
const client = new AWSAppSyncClient({...})
const store = createStore({...})
const ConnectedApp = () =>
<ApolloProvider client={client}>
<Rehydrated>
<ReduxProvider store={store}>
<App />
</ReduxProvider>
</Rehydrated>
</ApolloProvider>
I haven't had a chance to try this setup but I will soon and will edit with any findings. In the meantime here is a link showing how to build a full RN app with AppSync that uses MobX instead of Redux (https://github.com/dabit3/heard) that may also be a good place to start.
Related
I have been trying for ages to make Sanity work with React Native and It's not working out, read multiple documentations, followed many tutorials but no luck.... What am i doing wrong?
Made a simple recreation here:
https://snack.expo.dev/#spts/smelly-candies
Please let me know what I'm doing wrong, or what I have to do to make it work
There are a few things wrong here, first I'll assume you meant Sanity and not Strapi:
Data isn't loading from Sanity because you need to enable CORS for the expo playground: see more details here
Make sure you set an apiVersion in sanity.js
There were a few issues with your React code which I've updated below, and should work once the CORS issue is resolved.
import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import sanityClient from './sanity.js'
export default function App() {
const [stuff, setStuff] = useState([]);
useEffect(() => {
async function fetchData() {
const query = '*[_type == "post"] { title, content, emojiType }';
const data = await sanityClient.fetch(query);
setStuff(data)
}
fetchData()
}, [])
return (
<View>
<Text >
Change code in the editor and watch it change on your phone! Save to get a shareable url.
</Text>
<Text>{JSON.stringify(stuff)}</Text>
</View>
);
}
I'm trying to migrate my react app to next.js app.
I like redux-saga
I like routing in redux-saga logic
And I want to do routing in redux-saga logic as I used to do!
but I cannot figure out how to do this.
question is..
How to route with redux-saga logic in Next.js?
Is this bad practice doing this? I think putting routing logic on saga seems more reasonable. But I think it is not a popular way. Why it is not used by many people?
To help understanding my situations.
I usally do routing in react app like below
one of my saga logic as example
export function* deletePost(action) {
const { postId } = action;
//delete post
yield api.postApi.deletePost(postId);
//route page to home ("/")
yield put(actions.router.push("/"));
}
I used 'connected-react-router' to do this.
and actions.router is exported from below file.
import { routerActions as router } from "connected-react-router"
export { router }
And below is how I configured my redux store
import { applyMiddleware, compose, createStore } from "redux";
import createSagaMiddleware from "redux-saga";
import { routerMiddleware } from "connected-react-router";
import { createBrowserHistory } from "history";
import { composeWithDevTools } from "redux-devtools-extension";
import { createRootReducer } from "data/rootReducer";
import rootSaga from "data/rootSaga";
const history = createBrowserHistory();
const sagaMiddleware = createSagaMiddleware();
const rootReducer = createRootReducer(history);
const env = process.env.NODE_ENV;
let composeFn = composeWithDevTools;
if (env === "production") {
composeFn = compose;
}
export default function configureStore() {
const store = createStore(
rootReducer,
composeFn(applyMiddleware( sagaMiddleware, routerMiddleware(history)))
);
sagaMiddleware.run(rootSaga);
return { history, store };
}
How would I go about accessing my redux-store in a helpers.js file (basically a file full of functions that help derive/manipulate certain data that DEPEND ON THE STORE)?
The thing is I can't just do import store from './mystore' because of the way I am exporting it in my configureStore.js:
export default () => {
let store = createStore(persistedReducer, {}, applyMiddleware(ReduxThunk));
let persistor = persistStore(store);
return { store, persistor };
}
then I import this in my App.js into a PersistGate to wait for the store to get rehydrated:
import React, { Component } from 'react';
import Router from './Router';
import { Provider } from 'react-redux';
import configureStore from './configureStore';
import { PersistGate } from 'redux-persist/integration/react';
export default class App extends Component {
render() {
return (
<Provider store={configureStore().store}>
<PersistGate loading={null} persistor={configureStore().persistor}>
<Router />
</PersistGate>
</Provider>
);
}
}
This is why the app has access to the store through props, but I have no idea how to access this hydrated state without a React.Component.
If I import this and call store.getState() I get a new store (i.e. a new store with the initial state and not the actual persisted store that contains the local data).
Since all you export is a function that creates a new store you can't.
Without context (e.g., there might be a reason you're doing this, although I can't fathom what it is) just create the store outside the default exported function.
You can still export the function as default, and store as a named export.
image of the ERROR
OK so I'm starting a new project and this is the first time that this has happened to me/ I keep getting an error stating ×
TypeError: middleware is not a function i checked dependencies and everything seems fine gone over my code nothing seems wrong please help
I tried deleting the modules and installing them again, I also checked on a passed application I've been doing and since I'm just starting out the code looks identical but that seems to work.
import { createStore, applyMiddleware } from "redux";
import promiseMiddleware from "redux-promise-middleware";
import userReducer from "./ducks/userReducer";
const middleware = applyMiddleware(promiseMiddleware());
const store = createStore(userReducer, middleware);
export default store;
import React, { Component } from "react";
import routes from "./routes";
import { Provider } from "react-redux";
import store from "./redux/store";
class App extends Component {
render() {
return (
<Provider store={store}>
<div className="App">{routes}</div>
</Provider>
);
}
}
export default App;
When you use the function applyMiddleware, the middlewares shouldn't be called as functions.
So instead of:
const middleware = applyMiddleware(promiseMiddleware());
do:
const middleware = applyMiddleware(promiseMiddleware);
See https://redux.js.org/api/applymiddleware#example-custom-logger-middleware for more details.
What is the correct way to plug redux-batched-actions into my existing Redux store? I am completely confused by the Redux middleware API.
Currently I am using redux-thunk and redux-little-router.
Here is the code source that creates my Redux store:
import { createStore, applyMiddleware, compose, combineReducers } from 'redux'
import thunk from 'redux-thunk'
import { routerForBrowser } from 'redux-little-router'
import reducers from './store'
import routes from './routes'
const { reducer, middleware, enhancer } = routerForBrowser({ routes })
// Combine all reducers and instantiate the app-wide store instance
const allReducers = combineReducers({ ...reducers, router: reducer })
// Build middleware (if devTools is installed, connect to it)
const allEnhancers = (window.__REDUX_DEVTOOLS_EXTENSION__
? compose(
enhancer,
applyMiddleware(thunk, middleware),
window.__REDUX_DEVTOOLS_EXTENSION__())
: compose(
enhancer,
applyMiddleware(thunk, middleware)))
// Instantiate the app-wide store instance
const initialState = window.initialReduxState
const store = createStore(
allReducers,
initialState,
allEnhancers
)
The redux-batched-actions documentation exposes two usages: enableBatching and batchDispatchMiddleware. Which one should I use in my case?
Answering my own question after the return of my expedition into the fabulous source code of redux, redux-thunk, redux-batched-actions, ...
The correct way to do it seems to be using batchDispatchMiddleware, like this:
import { batchDispatchMiddleware } from 'redux-batched-actions'
// ...
const allEnhancers = (window.__REDUX_DEVTOOLS_EXTENSION__
? compose(
enhancer,
applyMiddleware(batchDispatchMiddleware, thunk, middleware),
window.__REDUX_DEVTOOLS_EXTENSION__())
: compose(
enhancer,
applyMiddleware(batchDispatchMiddleware, thunk, middleware)))
Note: I don't know if I could dispatch batched thunks, though. I don't do that in my current application. Use at your own risk!