I'm using react-admin. I would need to be able to access a value in the redux store in the App.js file. Based on this value, I pass different props to the Resources components included in Admin.
If I access the store in a classic way I get an error like this:
could not find react-redux context value; please ensure the component is wrapped in a
This is normal because the App is not wrapped by the provider. But do I have a way to do it by leaning on another component? Or some other way?
Thank you
const App = () => {
const theme = useSelector(state => state.theme);
useEffect(() => {
loadReCaptcha();
console.log('theme', theme);
}, []);
return (
<Admin
title="Atena"
dataProvider={dataProvider}
customReducers={{ theme: themeReducer }}
....
Related
I am wondering how to use <TestContext> as a sufficient tool for testing react-admin custom components view. So far we have not encountered an error rendering basic HTML element inside <TestContext>, but with RA component test are failing mostly due to:
TypeError: Cannot create proxy with a non-object as target or handler
In our case, we do not have a redux store connected to our component and for now, just want to test the display with simple props using an example from documentation.
describe('<EditManufacturer/>', () => {
let testUtils: any;
beforeEach(() => {
const mockEditManufacturerProps = {
basePath: '/',
id: '123',
resource: 'foo',
};
testUtils = render(
<TestContext>
<EditManufacturer {...mockEditManufacturerProps}/>
</TestContext>)
});
// test
})
});
Example syntax above produces another error:
Cannot read property '{"type":"GET_ONE","resource":"foo","payload":{"id":"123"}}' of undefined
Here is our EditManufacturer.tsx component:
const EditManufacturer:React.FC<EditProps> = props => {
return(
<Edit {...props}>
<SimpleForm>
<ManufacturerInputFields/>
</SimpleForm>
</Edit>
)};
export default EditManufacturer;
Is injecting all the required props for HOCs and then mounting the view as mentioned in answer here or using e2e tests the only solution? Any help would be appreciated.
In RN my bilingual app (English - Arabic), I have used I18nManager (views) and I18n (for translations)
When I am changing app language to Arabic, the whole app gets reloaded again from the splash-screen using this code:
I18nManager.forceRTL(true)
Ideally, it should not restart the app from start and it should continue with the current screen with Arabic data.
Currently, it is not happening, only translation elements are getting converted using I18n.t('keyword') but for views Arabic alignment, it's not proper.
Still looking for a better solution, let me know if anyone achieved it.
Thanks
Sopo !!
you should put this code in the top component in your project
import RNRestart from "react-native-restart";
I18nManager.forceRTL(true);
if (!I18nManager.isRTL) RNRestart.Restart();
If you guys wants to store stack state after reloading(because there is no other option without reloading) and want stack state back you can follow this link also you can check my code.
Link: React navigation state persist
Any Component
AsyncStorage.setItem('navigation_state', JSON.stringify(navigation.dangerouslyGetState()));
My App.js
const App = () => {
const [initialState, setInitialState] = useState();
const [isReady, setIsReady] = useState(false);
useEffect(() => {
restoreState();
}, []);
const restoreState = async () => {
try {
const savedStateString = await AsyncStorage.getItem('navigation_state');
const state = savedStateString ? JSON.parse(savedStateString) : undefined;
if (state !== undefined) {
AsyncStorage.removeItem('navigation_state');
setInitialState(state);
}
} finally {
setIsReady(true);
}
};
if (!isReady) {
return null;
}
return (
<Provider store={store}>
<NavigationContainer
initialState={initialState}
ref={rootNavigationRef}>
<Root>
<AppNavigator />
</Root>
</NavigationContainer>
</Provider>
);
};
I working on a project which has two languages, Arabic and English.i use redux for handling app language. I put all styles on redux and handle app style with redux. and when user change language all styles on my app change to that language . also all text handled with redux too. with this way, my app does not reload and app language changed immediately.
If your app is an android hybrid app, you can try this:
import com.facebook.react.modules.i18nmanager.I18nUtil;
I18nUtil i18nUtil = I18nUtil.getInstance();
i18nUtil.forceRTL(context, forceRtl);
i18nUtil.allowRTL(context, true);
value 'forceRtl' is a boolean.
for iOS,I think you can find the same method.
In Expo use
import {Updates} from "expo"
Updates.reload()
this.$navigateTo works perfectly fine within the methods of my components, but inside a mutation neither of Vue.$navigateTo and this.$navigateTo work. My navigation depends on the result I get from an api call, if there is no way to perform a navigation from within store actions, how can I get some return value from an store action so I can perform my navigation within my component?
You can return a value from a store action. Since actions are async, you will need to handle the resulting promise, doing something like
store.dispatch('actionA').then((target) => {
// navigate to target
})
The concept is explained here:
https://vuex.vuejs.org/guide/actions.html#composing-actions
Here is How I solved it:
new Vue({
store,
render: h => h('frame', [h(store.state.is_logged_in ? App : Login)]),
created() {
this.$store.commit('setNav', t => this.$navigateTo(t));
if (this.$store.state.is_logged_in) {
this.$store.dispatch('init');
}
},
}).$start();
Now in my actions I do:
logout({commit, state}) {
console.log('logged out');
commit('log_out');
state.nav(Login);
},
I am using asiox/vuejs to create a webpage. However I want to compartmentalize the code more. One example is I use axios to make requests to the backend, and the data in the response is commited into vuex.
this.$axios.get('events').then((response) => {
this.$store.commit('data/populate', response.data)
})
.catch((e) => {
console.error(e)
})
I want to write a util method for this, like this.$populate.events()
I have tried creating utils inside the plugins/ directory, but they dont have access to this.$axios or this.$store
Note that I have axios and vuex imported in nuxt.config.js
How can this be achieved?
If you need the function in the context, Vue instances and maybe even
in the Vuex store, you can use the inject function, which is the
second parameter of the plugins exported function.
Injecting content into Vue instances works similar to when doing this
in standard Vue apps. The $ will be prepended automatically to the
function.
Reference
export default ({ app, store }, inject) => {
inject("populate", () => {
app.$axios
.get("events")
.then(response => {
store.commit("data/populate", response.data);
})
.catch(e => {
console.error(e);
});
});
};
app variable is context property.
The root Vue instance options that includes all your plugins. For
example, when using axios, you can get access to $axios through
context.app.$axios.
Figured it out not 5 minutes after posting ...
Basically use this nuxt guide
And replace this with app in the method you'd like to move
I am using React navigation I am looking for a way to pass parameters into my navigation stack as follows. I have actually one screen which I want to use X amount of times. It only needs an url and a title, and based on the url it should do exactly the same for each url.
So i want to create an object like so:
const urls = {
{title: 'foo', url: 'https://someurl'},
{title: 'bar', url: 'https://someotherurl'}
}
And now in my Navigation component I would like to do something like:
export default createMaterialTopTabNavigator({
SomeKey: {
// Loop here over the urls and create a component and pass props.
}
});
My issue is that I can't find in the documentation how to pass the title and url parameter via the navigator to the specific screens.
Any Suggestions?
I can help you with one part, you can pass variables from Navigator like this
export default createMaterialTopTabNavigator({
ScreenOne: {
screen:props=> <ScreenOne {...props} screenProps={yourpropsr}/>
}
});
The documentation has example for StackNavigator but I hope this will work for TabNavigator too. Documentation link here
I'm doing something similar in my app, but I'm grabbing my array from an API and build my navigation upon that. For each item in my array, I build the same screen setup in a tab navigation and have them all available from a drawer navigator.
You could do something like this:
let NavigatorConfig = {};
urls.forEach(item => {
NavigatorConfig = {
...NavigatorConfig,
[item.title]: {
screen: props => <MyComponent {...props} url={item.url} />
}
};
});
export default createMaterialTopTabNavigator(NavigatorConfig);