0608零散问题整理

1. redux store

createStore
Creates a Redux store that holds the complete state tree of your app. There should only be a single store in your app.
The only way to change its state is by dispatching actions.
You may also subscribe to the changes to its state to update the UI.

Enhance store: middleware / enhancers
Most apps extend the functionality of their Redux store by adding middleware or store enhancers (note: middleware is common, enhancers are less common). Middleware adds extra functionality to the Redux dispatch function; enhancers add extra functionality to the Redux store.

Enhance store: middleware / enhancers 补充
applyMiddleware lets you inject functionality into dispatch. As it turns out, you do this by writing a function, that returns a function, that returns a function. No, I’m afraid I’m not joking.
Only the inner-most function runs on each dispatch.

Using Thunk Middleware for Async Actions:

2. “Element Type is invalid” exception

Element Type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

import MyButton from '../index';
// 改为：
import { MyButton } from '../index';

详细解释:

This is a default import:

// B.js
import A from './A'

It only works if A has the default export:

// A.js
export default 42

This is a named import called A:

import { A } from './A'

It only works if A contains a named export called A:

export const A = 42

3. combine gradle spring backend with react redux UI

1. need include frontend in settings.gradle
2. need in service build.gradle

processResources {
	from("../UI/target/distro/") {into "static" include "index-webpack-*.min.js"}
	from("../UI/target/distro/css") {into "static/css" include "main-*.min.css"}
	from("../UI/target/distro/fonts") {into "static/fonts"}
	from("../UI/target/distro/images") {into "static/images"}
	from("../UI/target/distro/") {into "template" include "index.html"}
}

3. need write controller in backend: using @Controller, @GetMapping…
4. need @Configuration file: SpringWebMVCConfig. (Example)
5. build project together with frontend, if extra env is needed for frontend, build project in terminal after config the env for frontend(using command in terminal).

// step 1:
// initial env for frontend
// step 2:
gradlew.bat build

4. 剩余的一些零散知识点

1. How to test React with Jest & Enzyme

import fetchMock from 'fetch-mock'

window.alert = jest.fn();

describe("My Component", () => {

	afterEach(() => {
		window.alert.mockClear();
		fetchMock.restore();
	});
	
	it('create MY_ROUTINE_SUCCESS when fetching is done', () => {
		fetchMock.getOnce(url,
			{actionPayloadData: ['response Something']}
		);
		....
	});
});

3. what is the difference between jest.fn() and an empty function
   jest.fn() has more methods to use, .mock, .mock.calls…

4. arrow function can omit return:

const func = () => "result";

// equivalent to:
const func = () => {
	return "result"
};